<script setup lang="ts">
import { computed, shallowRef, watch } from 'vue';
import { RouterView } from 'vue-router';
import { ElConfigProvider } from 'element-plus';
import type { Language } from 'element-plus/es/locale';
import { useAdminLocale } from './composables/useAdminLocale';

const { locale } = useAdminLocale();
const elLocale = shallowRef<Language | undefined>(undefined);

async function loadElLocale(tag: string) {
  if (tag.startsWith('zh')) {
    elLocale.value = (await import('element-plus/es/locale/lang/zh-cn')).default;
    return;
  }
  if (tag.startsWith('ms')) {
    elLocale.value = (await import('element-plus/es/locale/lang/ms')).default;
    return;
  }
  elLocale.value = (await import('element-plus/es/locale/lang/en')).default;
}

watch(
  () => locale.value,
  (tag) => {
    void loadElLocale(tag);
  },
  { immediate: true },
);

const configLocale = computed(() => elLocale.value);
</script>

<template>
  <ElConfigProvider :locale="configLocale">
    <RouterView />
  </ElConfigProvider>
</template>

<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

:root {
  /* Common variables placeholder if needed, layout rules follow */
}

/* 页面级隐藏滚动条 */
html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: manipulation;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 1023px) {
  input,
  select,
  textarea,
  .el-input__inner,
  .el-textarea__inner {
    font-size: 16px !important;
  }
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* 管理端列表页布局 */
.admin-list-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 18px;
}
.admin-list-page > .page-toolbar,
.admin-list-page > .filter-card,
.admin-list-page > .tool-card,
.admin-list-page > .list-chrome,
.admin-list-page > .list-settings {
  flex-shrink: 0;
}
.admin-list-page > .page-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.admin-list-page > .tool-card {
  margin-bottom: 0;
}
.admin-list-page > .filter-card {
  margin-bottom: 0;
}
.admin-list-page > .list-chrome {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.list-chrome__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border-soft);
  --list-chrome-control-h: 32px;
  --el-component-size: 32px;
}
.list-chrome__left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 12px;
  flex-wrap: nowrap;
}
.list-chrome__filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  flex: 1;
  min-width: 0;
}
.list-chrome__field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.list-chrome__label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}
.list-chrome__grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
}
.list-chrome__grow.el-form--inline {
  display: flex !important;
  align-items: center;
}
.list-chrome__left .matches-subnav--embedded {
  align-self: center;
}
.list-chrome__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.list-chrome :deep(.el-form-item) {
  margin-bottom: 0 !important;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.list-chrome :deep(.el-form-item__label) {
  display: inline-flex;
  align-items: center;
  height: var(--list-chrome-control-h);
  line-height: 1;
  padding: 0 8px 0 0;
  margin-bottom: 0 !important;
}
.list-chrome :deep(.el-form-item__content) {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.list-chrome :deep(.el-input__wrapper),
.list-chrome :deep(.el-select__wrapper) {
  height: var(--list-chrome-control-h) !important;
  min-height: var(--list-chrome-control-h) !important;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.list-chrome :deep(.el-input__inner) {
  height: calc(var(--list-chrome-control-h) - 2px);
  line-height: calc(var(--list-chrome-control-h) - 2px);
}
.list-chrome :deep(.el-button:not(.is-link)) {
  height: var(--list-chrome-control-h) !important;
  min-height: var(--list-chrome-control-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
}
.list-chrome :deep(.el-form-item:last-child) {
  margin-right: 0;
}
.admin-list-page > .list-settings {
  margin-bottom: 0;
}
.list-settings :deep(.el-collapse-item__header) {
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-hover);
  border-color: var(--border-soft);
}
.list-settings :deep(.el-collapse-item__wrap) {
  border-color: var(--border-soft);
}
.list-settings :deep(.el-collapse-item__content) {
  padding: 8px 10px 10px;
}
.list-settings-block + .list-settings-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.list-settings-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.admin-list-page > .data-card,
.admin-list-page > .list-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}
.admin-list-page > .list-panel {
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 14px 16px 16px;
}

/* Tabs / 筛选壳内的 list-panel 不再套第二层卡片，避免顶边重叠 */
.admin-list-page > .mgr-tabs-shell .list-panel,
.admin-list-page .el-tab-pane > .list-panel,
.list-chrome > .list-panel {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

/* 代理管理等 Tabs 页：外层壳作为唯一卡片 */
.admin-list-page > .mgr-tabs-shell {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
  padding: 14px 16px 16px;
}

.admin-list-page > .mgr-tabs-shell .mgr-top-tabs .el-tabs__header {
  margin-bottom: 14px;
}

.admin-list-page > .filter-card .el-card__body {
  padding: 16px 18px 18px;
}

.admin-list-page > .filter-card .el-tabs__header {
  margin-bottom: 14px;
}

.list-chrome__row + .list-hint {
  margin-top: 2px;
  padding-top: 4px;
  padding-bottom: 0;
}
.admin-list-page > .data-card .el-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

/* data-card 内不再嵌套第二层卡片边框，避免双层顶边重合 */
.admin-list-page > .data-card .table-wrap,
.admin-list-page > .data-card .admin-table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.admin-list-page .table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.admin-list-page .table-wrap .el-table {
  height: 100% !important;
}
.admin-list-page .table-wrap .el-table th.el-table__cell .cell {
  white-space: nowrap;
}
.admin-list-page .table-wrap.is-compact-row-actions .admin-responsive-actions__inline {
  display: none !important;
}
.admin-list-page .table-wrap.is-compact-row-actions .admin-responsive-actions__menu {
  display: inline-flex !important;
}
.admin-list-page .table-wrap:not(.is-compact-row-actions) .admin-responsive-actions__menu {
  display: none !important;
}
.admin-list-page .list-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 4px 0 12px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.admin-list-page .list-panel-toolbar + .list-hint {
  padding-top: 0;
  margin-top: -2px;
}

.admin-list-page .list-panel-toolbar {
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-soft);
  --list-chrome-control-h: 32px;
  --el-component-size: 32px;
}

.admin-list-page .list-panel-toolbar :deep(.el-form-item) {
  margin-bottom: 0 !important;
  margin-right: 12px;
}

.admin-list-page .list-panel-toolbar :deep(.el-input__wrapper),
.admin-list-page .list-panel-toolbar :deep(.el-select__wrapper) {
  height: var(--list-chrome-control-h) !important;
  min-height: var(--list-chrome-control-h) !important;
}

.admin-list-page .list-panel-toolbar :deep(.el-button:not(.is-link)) {
  height: var(--list-chrome-control-h) !important;
  min-height: var(--list-chrome-control-h) !important;
}
.admin-list-page .pager {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 0;
}

/* 控制台等非列表页 */
.dashboard-page,
.page-scroll {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 详情/编辑弹窗自定义布局 */
.user-edit-dialog .el-dialog__body,
.agent-edit-dialog .el-dialog__body {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}
.user-edit-dialog .edit-meta,
.agent-edit-dialog .edit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.user-edit-dialog .edit-form-section,
.agent-edit-dialog .edit-form-section {
  margin-bottom: 12px;
}
.user-edit-dialog .edit-form-section:last-child,
.agent-edit-dialog .edit-form-section:last-child {
  margin-bottom: 0;
}
.user-edit-dialog .section-title,
.agent-edit-dialog .section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.user-edit-dialog .compact-edit-form .el-form-item,
.agent-edit-dialog .compact-edit-form .el-form-item {
  margin-bottom: 10px;
}
.user-edit-dialog .field-hint,
.agent-edit-dialog .field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.user-edit-dialog .inline-hint,
.agent-edit-dialog .inline-hint {
  margin-top: 0;
}
.user-edit-dialog .password-mgmt-block,
.agent-edit-dialog .password-mgmt-block {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg-hover);
}
.user-edit-dialog .block-title,
.agent-edit-dialog .block-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--warning-text);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.user-edit-dialog .password-field-row,
.agent-edit-dialog .password-field-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  margin-bottom: 8px;
}
.user-edit-dialog .password-field-row:last-child,
.agent-edit-dialog .password-field-row:last-child {
  margin-bottom: 0;
}
.user-edit-dialog .password-field-label,
.agent-edit-dialog .password-field-label {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}
.user-edit-dialog .password-plain,
.agent-edit-dialog .password-plain {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--warning-text);
  letter-spacing: 0.06em;
}
.user-edit-dialog .password-empty,
.agent-edit-dialog .password-empty {
  color: var(--text-muted);
}
.user-edit-dialog .block-hint,
.agent-edit-dialog .block-hint {
  margin: -2px 0 8px;
  padding-left: 82px;
}
.user-edit-dialog .cashback-edit-block,
.agent-edit-dialog .cashback-edit-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.user-edit-dialog .contact-row,
.agent-edit-dialog .contact-row {
  margin-bottom: 0;
}
.user-edit-dialog .contact-row .el-form-item,
.agent-edit-dialog .contact-row .el-form-item {
  margin-bottom: 0;
}
.user-edit-dialog .edit-stats-panel,
.agent-edit-dialog .edit-stats-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.agent-edit-dialog .edit-stats {
  margin-top: 4px;
}
.entity-detail-dialog .el-dialog__body {
  padding: 12px 20px 16px !important;
  max-height: none !important;
  overflow: visible !important;
}
.detail-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

/* ──────────────────────────────────────────────────────────────
   Admin light refresh
   The legacy admin theme was built as one dark surface. These
   overrides intentionally keep the current component system while
   giving every page clearer hierarchy, calmer colors and stronger
   table/form affordance.
────────────────────────────────────────────────────────────── */
:root {
  --accent:          #1f2320;
  --accent-muted:    #5f5b53;
  --accent-dim:      #8c867c;
  --accent-subtle:   #f0ede6;
  --accent-border:   #ded8cc;
  --accent-hover:    #f5f2eb;
  --accent-focus:    rgba(31, 35, 32, 0.16);

  --success-text:    #346538;
  --success-bg:      #edf3ec;
  --success-border:  #d6e3d4;
  --warning-text:    #956400;
  --warning-bg:      #fbf3db;
  --warning-border:  #eadcad;
  --danger-text:     #9f2f2d;
  --danger-bg:       #fdebec;
  --danger-border:   #f3c5c7;
  --info-text:       #1f6c9f;
  --info-bg:         #e1f3fe;
  --info-border:     #c7e4f6;

  --gold-deep:       var(--warning-text);
  --gold-mid:        #b88928;
  --gold-bright:     #8f6a18;
  --gold-glow:       #8f6a18;
  --gold-surface:    var(--warning-bg);
  --gold-border:     var(--warning-border);
  --gold-text:       var(--warning-text);
  --green-deep:      var(--success-text);
  --green-mid:       #477a4c;
  --green-bright:    #346538;
  --green-glow:      #346538;
  --green-surface:   var(--success-bg);
  --green-border:    var(--success-border);
  --green-text:      var(--success-text);

  --primary:         #1f2320;
  --primary-dark:    #111411;
  --primary-light:   #363a35;
  --primary-link:    #1f6c9f;
  --primary-on:      #ffffff;
  --primary-grad:    #1f2320;
  --primary-grad-hover: #363a35;
  --primary-shadow:  none;

  --bg-body:         #f7f6f3;
  --bg-card:         #ffffff;
  --bg-elevated:     #fbfbfa;
  --bg-hover:        #f1eee8;
  --text:            #1f2320;
  --text-muted:      #78746b;
  --border:          #e7e2d8;
  --border-soft:     #f0ece4;
  --radius:          8px;
  --radius-sm:       6px;
  --shadow:          0 8px 28px rgba(56, 49, 37, 0.05);

  --el-bg-color:              #ffffff;
  --el-bg-color-page:         #f7f6f3;
  --el-bg-color-overlay:      #ffffff;
  --el-text-color-primary:    #1f2320;
  --el-text-color-regular:    #3d413b;
  --el-text-color-secondary:  #78746b;
  --el-text-color-placeholder:#aaa49a;
  --el-border-color:          #e7e2d8;
  --el-border-color-light:    #eee9df;
  --el-border-color-lighter:  #f4f0e8;
  --el-fill-color:            #f8f6f1;
  --el-fill-color-blank:      #ffffff;
  --el-fill-color-light:      #fbfaf7;
  --el-color-primary:         #1f2320;
  --el-color-primary-light-3: #5d635c;
  --el-color-primary-light-5: #8d938b;
  --el-color-primary-light-7: #d9ddd6;
  --el-color-primary-light-9: #f4f6f2;
  --el-color-primary-dark-2:  #111411;
  --el-color-success:         var(--success-text);
  --el-color-success-light-9: var(--success-bg);
  --el-color-warning:         var(--warning-text);
  --el-color-warning-light-9: var(--warning-bg);
  --el-color-danger:          var(--danger-text);
  --el-color-danger-light-9:  var(--danger-bg);
  --el-color-info:            var(--info-text);
  --el-color-info-light-9:    var(--info-bg);
  --el-table-bg-color:        #ffffff;
  --el-table-tr-bg-color:     #ffffff;
  --el-table-header-bg-color: #fbfaf7;
  --el-table-row-hover-bg-color: #f7f4ee;
  --el-table-border-color:    #eee9df;
  --el-table-text-color:      #363a35;
  --el-table-header-text-color: #6c675f;
  --el-card-bg-color:         #ffffff;
  --el-card-border-color:     #e7e2d8;
  color-scheme: light;
}

html,
body,
#app {
  background: var(--bg-body) !important;
  color: var(--text) !important;
}

body {
  font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'PingFang SC',
    'Microsoft YaHei', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

*:focus-visible {
  outline: 2px solid rgba(31, 35, 32, 0.28);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d5cfc3;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #bdb6a9;
  border: 3px solid transparent;
  background-clip: padding-box;
}

* {
  scrollbar-color: #d5cfc3 transparent;
}

a {
  color: var(--primary-link);
}

.el-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

.el-card__header {
  border-bottom: 1px solid var(--border-soft) !important;
  padding: 14px 18px !important;
}

.el-card__body {
  color: var(--text) !important;
}

.el-table {
  border-radius: var(--radius) !important;
  background: #ffffff !important;
  color: #363a35 !important;
  font-size: 13px;
  --el-table-border-color: var(--border-soft);
}

.el-table::before,
.el-table__inner-wrapper::before {
  background: var(--border-soft) !important;
}

.el-table th.el-table__cell {
  height: 42px;
  background: #fbfaf7 !important;
  border-bottom: 1px solid var(--border) !important;
  color: #6c675f !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.el-table td.el-table__cell {
  border-bottom-color: var(--border-soft) !important;
  color: #363a35 !important;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fbfaf7 !important;
}

.el-table__body tr:hover > td {
  background: #f7f4ee !important;
}

.el-table .cell {
  line-height: 1.45;
}

.el-table__empty-block {
  min-height: 168px;
}

.el-table__empty-text {
  color: var(--text-muted) !important;
}

.el-table__fixed-right,
.el-table__fixed {
  box-shadow: none !important;
}

.el-table__fixed-right::before,
.el-table__fixed::before {
  background: var(--border-soft) !important;
}

.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner,
.el-input-number .el-input__wrapper,
.el-date-editor .el-input__wrapper {
  min-height: 34px;
  border-radius: 7px !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px var(--border) inset !important;
  color: var(--text) !important;
}

.el-input,
.el-select,
.el-date-editor {
  height: auto !important;
}

.el-input__wrapper:hover,
.el-select__wrapper:hover,
.el-textarea__inner:hover {
  box-shadow: 0 0 0 1px #d5cfc3 inset !important;
}

.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
  box-shadow: 0 0 0 1px #1f2320 inset, 0 0 0 3px rgba(31, 35, 32, 0.08) !important;
}

.el-input-number {
  --el-input-number-controls-height: 15px;
}

.el-input-number .el-input__wrapper {
  padding-right: 32px !important;
}

.el-input-number .el-input__inner {
  padding: 0 4px !important;
  text-align: center;
}

.el-input-number.is-controls-right .el-input__wrapper {
  padding-left: 8px !important;
  padding-right: 32px !important;
}

.el-input-number--small.is-controls-right .el-input__wrapper {
  padding-right: 28px !important;
}

.el-input-number__increase,
.el-input-number__decrease {
  background: #fbfaf7 !important;
  border-color: var(--border) !important;
  color: #6c675f !important;
  box-shadow: none !important;
}

.el-input-number__increase:hover,
.el-input-number__decrease:hover {
  background: var(--accent-hover) !important;
  color: var(--text) !important;
}

.el-input-number.is-controls-right .el-input-number__increase {
  top: 1px !important;
  right: 1px !important;
  width: 30px !important;
  height: calc((100% - 2px) / 2) !important;
  border-left: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 7px 0 0 !important;
}

.el-input-number.is-controls-right .el-input-number__decrease {
  right: 1px !important;
  bottom: 1px !important;
  width: 30px !important;
  height: calc((100% - 2px) / 2) !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 0 0 7px 0 !important;
}

.el-input-number--small.is-controls-right .el-input-number__increase,
.el-input-number--small.is-controls-right .el-input-number__decrease {
  width: 28px !important;
}

.el-input-number__increase,
.el-input-number__decrease {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}

.el-input-number:not(.is-controls-right) .el-input-number__decrease {
  border-right: 1px solid var(--border) !important;
}

.el-input-number:not(.is-controls-right) .el-input-number__increase {
  border-left: 1px solid var(--border) !important;
}

.el-input-number__increase.is-disabled,
.el-input-number__decrease.is-disabled {
  background: #f4f0e8 !important;
  color: #b6afa3 !important;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.el-input__inner,
.el-select__placeholder,
.el-date-editor .el-input__inner,
.el-textarea__inner {
  color: var(--text) !important;
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: #aaa49a !important;
}

.el-input.is-disabled .el-input__wrapper,
.el-select.is-disabled .el-select__wrapper,
.el-textarea.is-disabled .el-textarea__inner {
  background: #f4f0e8 !important;
  box-shadow: 0 0 0 1px #ebe5da inset !important;
}

.el-input.is-disabled .el-input__inner,
.el-select.is-disabled .el-select__placeholder {
  color: #aaa49a !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
}

.el-form-item__label {
  color: #6c675f !important;
  font-weight: 650;
}

.el-form-item__error {
  color: var(--danger-text) !important;
}

.el-button {
  border-radius: 7px !important;
  border-color: var(--border) !important;
  background: #ffffff !important;
  color: var(--text) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.el-button:hover,
.el-button:focus {
  background: var(--accent-hover) !important;
  border-color: #d5cfc3 !important;
  color: var(--text) !important;
}

.el-button--primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  color: #ffffff !important;
}

.el-button--primary.is-plain,
.el-button--info.is-plain {
  background: var(--info-bg) !important;
  border-color: var(--info-border) !important;
  color: var(--info-text) !important;
}

.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus,
.el-button--info.is-plain:hover,
.el-button--info.is-plain:focus {
  background: #d5ecfb !important;
  border-color: #9fd0ed !important;
  color: #155b86 !important;
}

.el-button--success {
  background: var(--success-text) !important;
  border-color: var(--success-text) !important;
  color: #ffffff !important;
}

.el-button--success.is-plain {
  background: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: var(--success-text) !important;
}

.el-button--success.is-plain:hover,
.el-button--success.is-plain:focus {
  background: #dcebd9 !important;
  border-color: #bad0b8 !important;
  color: #2f5d34 !important;
}

.el-button--warning {
  background: var(--warning-text) !important;
  border-color: var(--warning-text) !important;
  color: #ffffff !important;
}

.el-button--warning.is-plain {
  background: var(--warning-bg) !important;
  border-color: var(--warning-border) !important;
  color: var(--warning-text) !important;
}

.el-button--warning.is-plain:hover,
.el-button--warning.is-plain:focus {
  background: #f3e6bd !important;
  border-color: #d4bd75 !important;
  color: #7f5500 !important;
}

.el-button--danger {
  background: var(--danger-text) !important;
  border-color: var(--danger-text) !important;
  color: #ffffff !important;
}

.el-button--danger.is-plain {
  background: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger-text) !important;
}

.el-button--danger.is-plain:hover,
.el-button--danger.is-plain:focus {
  background: #f8d9dc !important;
  border-color: #e3a8ac !important;
  color: #842827 !important;
}

.el-button--info {
  background: #eef1ec !important;
  border-color: #d9ddd6 !important;
  color: #4d524b !important;
}

.el-button.is-link,
.el-button--primary.is-link,
.el-button--success.is-link,
.el-button--warning.is-link,
.el-button--danger.is-link {
  min-height: 0;
  padding: 0 4px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--primary-link) !important;
}

.el-button--danger.is-link {
  color: var(--danger-text) !important;
}

.el-button--warning.is-link {
  color: var(--warning-text) !important;
}

/* Link buttons hover in light theme - override dark legacy */
.el-button.is-link:hover,
.el-button.is-link:focus,
.el-button.is-link.el-button--default:hover,
.el-button.is-link.el-button--default:focus,
.el-button.is-link.el-button--primary:hover,
.el-button.is-link.el-button--primary:focus {
  color: #155b86 !important; /* Darker blue */
  background: transparent !important;
  text-decoration: underline !important;
}

.el-button.is-link.el-button--success:hover,
.el-button.is-link.el-button--success:focus {
  color: #224225 !important; /* Darker green */
  background: transparent !important;
  text-decoration: underline !important;
}

.el-button.is-link.el-button--warning:hover,
.el-button.is-link.el-button--warning:focus {
  color: #704b00 !important; /* Darker warning/gold */
  background: transparent !important;
  text-decoration: underline !important;
}

.el-button.is-link.el-button--danger:hover,
.el-button.is-link.el-button--danger:focus {
  color: #7d2321 !important; /* Darker danger/red */
  background: transparent !important;
  text-decoration: underline !important;
}


.el-button.is-disabled,
.el-button.is-disabled:hover {
  background: #f4f0e8 !important;
  border-color: #ebe5da !important;
  color: #aaa49a !important;
}

.el-button.is-plain.is-disabled,
.el-button.is-plain.is-disabled:hover,
.el-button.is-plain.is-disabled:focus,
.el-button.is-plain:disabled,
.el-button--primary.is-plain.is-disabled,
.el-button--primary.is-plain.is-disabled:hover,
.el-button--primary.is-plain:disabled,
.el-button--success.is-plain.is-disabled,
.el-button--success.is-plain.is-disabled:hover,
.el-button--success.is-plain:disabled,
.el-button--warning.is-plain.is-disabled,
.el-button--warning.is-plain.is-disabled:hover,
.el-button--warning.is-plain:disabled,
.el-button--danger.is-plain.is-disabled,
.el-button--danger.is-plain.is-disabled:hover,
.el-button--danger.is-plain:disabled {
  background: #f4f0e8 !important;
  border-color: #e3dcca !important;
  color: #aaa49a !important;
}

.el-tag {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.el-tag--success {
  background: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: var(--success-text) !important;
}

.el-tag--warning {
  background: var(--warning-bg) !important;
  border-color: var(--warning-border) !important;
  color: var(--warning-text) !important;
}

.el-tag--danger {
  background: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger-text) !important;
}

.el-tag--info {
  background: #eef1ec !important;
  border-color: #d9ddd6 !important;
  color: #5d635c !important;
}

.el-tag--primary {
  background: var(--accent-subtle) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

.el-pagination {
  --el-pagination-bg-color: #ffffff;
  --el-pagination-button-bg-color: #ffffff;
  --el-pagination-hover-color: #1f2320;
  --el-pagination-text-color: #6c675f;
  --el-pagination-button-disabled-bg-color: #f4f0e8;
  gap: 4px;
}

.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pager li {
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
}

.el-pager li.is-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

.el-dropdown__popper,
.el-select__popper,
.el-popover.el-popper {
  border: 1px solid var(--border) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 44px rgba(56, 49, 37, 0.12) !important;
}

.el-dropdown-menu,
.el-select-dropdown {
  background: #ffffff !important;
}

.el-dropdown-menu__item,
.el-select-dropdown__item {
  color: var(--text) !important;
}

.el-dropdown-menu__item:hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: var(--accent-hover) !important;
  color: var(--text) !important;
}

.el-select-dropdown__item.is-selected {
  color: var(--text) !important;
  font-weight: 700;
}

.el-dialog,
.el-message-box {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 64px rgba(56, 49, 37, 0.14) !important;
}

.el-dialog__header,
.el-message-box__header {
  border-bottom: 1px solid var(--border-soft) !important;
}

.el-dialog__title,
.el-message-box__title {
  color: var(--text) !important;
  font-weight: 750 !important;
}

.el-dialog__body,
.el-message-box__content {
  color: var(--text) !important;
}

.el-dialog__footer,
.el-message-box__btns {
  border-top: 1px solid var(--border-soft) !important;
}

.el-overlay {
  background: rgba(31, 35, 32, 0.22) !important;
  backdrop-filter: blur(3px);
}

.el-loading-mask {
  background: rgba(247, 246, 243, 0.78) !important;
  backdrop-filter: blur(2px);
}

.el-loading-spinner .path {
  stroke: var(--primary) !important;
}

.el-loading-spinner .el-loading-text {
  color: var(--text-muted) !important;
}

.el-message {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(56, 49, 37, 0.12) !important;
}

.el-alert {
  border-radius: 8px !important;
}

.el-tabs__item {
  color: var(--text-muted) !important;
  font-weight: 650;
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: var(--text) !important;
}

.el-tabs__active-bar {
  background: var(--primary) !important;
}

.el-tabs__nav-wrap::after {
  background: var(--border-soft) !important;
}

.el-statistic__head {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.el-statistic__content .el-statistic__number {
  color: var(--text) !important;
  font-size: 24px !important;
  font-weight: 750 !important;
}

.el-picker-panel,
.el-time-panel {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 44px rgba(56, 49, 37, 0.12) !important;
}

.el-picker-panel__footer {
  background: #fbfaf7 !important;
  border-top-color: var(--border-soft) !important;
}

.el-date-picker__header-label,
.el-date-table th,
.el-date-table td .el-date-table-cell__text,
.el-time-spinner__item {
  color: var(--text) !important;
}

.el-date-table td.available:hover {
  color: var(--primary) !important;
}

.el-date-table td.current:not(.disabled) .el-date-table-cell__text {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.el-time-spinner__item.is-active:not(.is-disabled) {
  color: var(--primary) !important;
  font-weight: 700;
}

.admin-list-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--text);
}

.list-chrome {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.list-toolbar,
.filter-bar,
.filters,
.list-panel-toolbar,
.table-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}

.list-toolbar + .table-wrap,
.filter-bar + .table-wrap,
.filters + .table-wrap,
.list-panel-toolbar + .table-wrap,
.list-panel-toolbar + .admin-table-wrap,
.list-hint + .table-wrap,
.list-hint + .admin-table-wrap {
  margin-top: 0;
}

.table-wrap,
.admin-table-wrap,
.table-panel,
.list-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.list-chrome > .table-wrap,
.list-chrome > .admin-table-wrap,
.list-chrome > .table-panel,
.list-chrome > .list-panel {
  border: none;
  box-shadow: none;
  background: transparent;
}

.table-scroll,
.admin-table-scroll,
.el-table__body-wrapper {
  scrollbar-color: #d5cfc3 transparent;
}

.pager,
.list-pager,
.table-pager,
.pagination-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
}

.muted,
.hint,
.subtext,
.desc,
.table-hint,
.section-hint {
  color: var(--text-muted) !important;
}

.danger-text,
.c-red {
  color: var(--danger-text) !important;
}

.success-text,
.c-green {
  color: var(--success-text) !important;
}

.warning-text,
.c-gold,
.c-yellow {
  color: var(--warning-text) !important;
}

.admin-page-state,
.state-card,
.empty-state,
.error-state {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow);
}

.error-state,
.state-card.is-error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.error-state .state-title,
.state-card.is-error .state-title {
  color: var(--danger-text);
}

.user-edit-dialog .edit-stats-panel,
.agent-edit-dialog .edit-stats-panel,
.detail-actions {
  border-top-color: var(--border-soft);
}

.user-edit-dialog .password-field-label,
.agent-edit-dialog .password-field-label,
.user-edit-dialog .password-empty,
.agent-edit-dialog .password-empty {
  color: var(--text-muted);
}

.user-edit-dialog .password-plain,
.agent-edit-dialog .password-plain {
  color: var(--warning-text);
}

@media (max-width: 700px) {
  .admin-list-page {
    gap: 12px;
  }

  .list-chrome {
    padding: 12px;
    border-radius: 8px;
  }

  .list-toolbar,
  .filter-bar,
  .filters,
  .list-panel-toolbar,
  .table-toolbar {
    align-items: stretch;
  }

  .list-toolbar > *,
  .filter-bar > *,
  .filters > *,
  .list-panel-toolbar > *,
  .table-toolbar > * {
    max-width: 100%;
  }

  .el-input,
  .el-select,
  .el-date-editor,
  .el-button {
    max-width: 100%;
  }

  .el-table {
    font-size: 12px;
  }

  .pager,
  .list-pager,
  .table-pager,
  .pagination-bar {
    justify-content: center;
  }

  .el-pagination {
    justify-content: center;
    width: 100%;
    white-space: normal;
  }
}
</style>
