/* ============================================
   NetExperts Support — Admin UI Override
   Design tokens from netexperts-design-guide.html
   Dark mode aware — surfaces adapt, accents stay
   ============================================ */

/* ============================================
   TOKENS — light mode (default)
   ============================================ */
:root {
  /* Brand — fixed in both modes */
  --nx-red: #d51928;
  --nx-red-hover: #be1523;
  --nx-green: #2e7d4f;
  --nx-amber: #b07d2e;
  --nx-blue: #1d5a8a;

  /* Adaptive surfaces — light mode defaults */
  --nx-red-light: #f2d1d4;
  --nx-red-subtle: #fdf2f3;
  --nx-green-bg: #eef6f1;
  --nx-amber-bg: #faf5ec;
  --nx-blue-bg: #eef4fa;

  --nx-darkest: #302e2c;
  --nx-dark: #3e3b39;
  --nx-grey-700: #4d4a47;
  --nx-grey-600: #686461;
  --nx-grey-500: #918d89;
  --nx-grey-400: #b0aca8;
  --nx-grey-300: #cac7c4;
  --nx-grey-200: #d6d3d0;
  --nx-grey-100: #e8e6e3;
  --nx-grey-50: #f4f3f1;
  --nx-white: #ffffff;
  --nx-cream: #faf9f7;

  /* Sidebar/header — always dark in both modes */
  --nx-sidebar: #302e2c;
  --nx-sidebar-hover: #3e3b39;
  --nx-header: #302e2c;

  /* Element Plus primary overrides — both modes */
  --el-color-primary: var(--nx-red) !important;
  --el-color-primary-light-3: #e04a55 !important;
  --el-color-primary-light-5: #ea7c84 !important;
  --el-color-primary-light-7: #f2a5ab !important;
  --el-color-primary-light-8: #f6bfc3 !important;
  --el-color-primary-light-9: #fad8db !important;
  --el-color-primary-dark-2: #be1523 !important;
  --primaryColor: var(--nx-red) !important;

  --el-font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system,
    BlinkMacSystemFont, sans-serif !important;
}

/* ============================================
   TOKENS — dark mode overrides
   ============================================ */
html.dark {
  --nx-red-light: rgba(213,25,40,0.25);
  --nx-red-subtle: rgba(213,25,40,0.08);
  --nx-green-bg: rgba(46,125,79,0.12);
  --nx-amber-bg: rgba(176,125,46,0.12);
  --nx-blue-bg: rgba(29,90,138,0.12);

  --el-color-primary-light-3: #b0131f !important;
  --el-color-primary-light-5: rgba(213,25,40,0.5) !important;
  --el-color-primary-light-7: rgba(213,25,40,0.3) !important;
  --el-color-primary-light-8: rgba(213,25,40,0.2) !important;
  --el-color-primary-light-9: rgba(213,25,40,0.1) !important;
}

/* ============================================
   GLOBAL — both modes
   ============================================ */
body {
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system,
    BlinkMacSystemFont, sans-serif !important;
}

#nprogress .bar {
  background: var(--nx-red) !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--nx-red), 0 0 5px var(--nx-red) !important;
}

::selection {
  background: var(--nx-red-light) !important;
  color: var(--nx-red) !important;
}

/* ============================================
   HEADER — always dark in both modes
   ============================================ */
.app-header[data-v-7221956d] {
  background-color: var(--nx-header) !important;
}

.header-logo .logo[data-v-3931c2d3] {
  content: url('../nxdoor.svg') !important;
  width: 28px !important;
  height: 28px !important;
}

.header-logo .title[data-v-3931c2d3] {
  font-family: 'BastardusSans', 'Source Sans 3', sans-serif !important;
  font-size: 15px !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

.setting .title[data-v-557678d5] {
  color: #d6d3d0 !important;
}

.setting .title .nickname[data-v-557678d5] {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 14px !important;
}

.ex-icon[data-v-3931c2d3] {
  color: #cac7c4 !important;
}
.ex-icon[data-v-3931c2d3]:hover {
  color: #ffffff !important;
}

/* ============================================
   SIDEBAR — always dark in both modes
   ============================================ */
.scroll-sidebar[data-v-5791ad1c] {
  background-color: var(--nx-sidebar) !important;
}

.menus[data-v-a09e873f] {
  background-color: var(--nx-sidebar) !important;
  border-right: none !important;
}

.el-menu {
  background-color: var(--nx-sidebar) !important;
  border-right: none !important;
}

.el-menu-item,
.el-sub-menu__title {
  color: #cac7c4 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 14px !important;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  background-color: var(--nx-sidebar-hover) !important;
  color: #ffffff !important;
}

.el-menu-item.is-active {
  color: #ffffff !important;
  background-color: var(--nx-red) !important;
}

.el-menu--inline .el-menu-item {
  background-color: rgba(0,0,0,0.15) !important;
}
.el-menu--inline .el-menu-item:hover {
  background-color: var(--nx-sidebar-hover) !important;
}
.el-menu--inline .el-menu-item.is-active {
  background-color: var(--nx-red) !important;
}

.el-menu-item .el-icon,
.el-sub-menu__title .el-icon {
  color: #b0aca8 !important;
}
.el-menu-item:hover .el-icon,
.el-sub-menu__title:hover .el-icon {
  color: #ffffff !important;
}
.el-menu-item.is-active .el-icon {
  color: #ffffff !important;
}

.el-menu--popup {
  background-color: var(--nx-sidebar) !important;
}

/* ============================================
   LOGIN PAGE — primary (data-v-1dd7ab39)
   Logo, title, sizing — both modes
   ============================================ */
.login-logo[data-v-1dd7ab39] {
  content: url('../nxdoor.svg') !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 8px !important;
  display: block !important;
}

.login-form[data-v-1dd7ab39]::before {
  content: 'NetExperts Support Admin' !important;
  display: block !important;
  font-family: 'BastardusSans', 'Source Sans 3', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--nx-red) !important;
  letter-spacing: -0.01em !important;
  -webkit-text-stroke: 0.3px var(--nx-red) !important;
  margin-bottom: 28px !important;
  text-align: center !important;
}

.login-card[data-v-1dd7ab39] {
  border-radius: 14px !important;
  padding: 48px 40px !important;
  width: 400px !important;
}

.login-button[data-v-1dd7ab39] {
  height: 48px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
}

.el-form-item[data-v-1dd7ab39] .el-form-item__label {
  font-weight: 500 !important;
  font-size: 15px !important;
}

.el-form-item .el-input[data-v-1dd7ab39] .el-input__wrapper {
  border-radius: 10px !important;
  transition: border-color 150ms, box-shadow 150ms !important;
  padding: 8px 16px !important;
}

.el-form-item .el-input[data-v-1dd7ab39] input {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.el-form-item .el-input[data-v-1dd7ab39] input::placeholder {
  font-size: 15px !important;
}

/* Login — LIGHT mode surfaces */
html:not(.dark) .login-container[data-v-1dd7ab39] {
  background: linear-gradient(145deg, #faf9f7 0%, #f4f3f1 100%) !important;
}
html:not(.dark) .login-card[data-v-1dd7ab39] {
  background: #ffffff !important;
  border: 1px solid #e8e6e3 !important;
  box-shadow: 0 2px 4px rgba(48,46,44,0.03), 0 8px 24px rgba(48,46,44,0.04) !important;
}
html:not(.dark) h1[data-v-1dd7ab39] {
  color: #302e2c !important;
}
html:not(.dark) .el-form-item[data-v-1dd7ab39] .el-form-item__label {
  color: #3e3b39 !important;
}
html:not(.dark) .el-form-item .el-input[data-v-1dd7ab39] .el-input__wrapper {
  border-color: #d6d3d0 !important;
  background: #faf9f7 !important;
  box-shadow: 0 1px 2px rgba(48,46,44,0.03) !important;
}
html:not(.dark) .el-form-item .el-input[data-v-1dd7ab39] .el-input__wrapper:hover {
  border-color: #cac7c4 !important;
}
html:not(.dark) .el-form-item .el-input[data-v-1dd7ab39] input {
  color: #3e3b39 !important;
}
html:not(.dark) .el-form-item .el-input[data-v-1dd7ab39] input::placeholder {
  color: #b0aca8 !important;
}
html:not(.dark) .divider[data-v-1dd7ab39] {
  color: #918d89 !important;
}
html:not(.dark) .divider[data-v-1dd7ab39]::before,
html:not(.dark) .divider[data-v-1dd7ab39]::after {
  background-color: #d6d3d0 !important;
}
html:not(.dark) .oidc-btn[data-v-1dd7ab39] {
  border-color: #d6d3d0 !important;
  color: #3e3b39 !important;
}

/* Login — DARK mode surfaces */
html.dark .login-container[data-v-1dd7ab39] {
  background: #1a1a1c !important;
}
html.dark .login-card[data-v-1dd7ab39] {
  background: #24252b !important;
  border: 1px solid #363739 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
html.dark h1[data-v-1dd7ab39] {
  color: #e0e0e0 !important;
}
html.dark .el-form-item[data-v-1dd7ab39] .el-form-item__label {
  color: #c0c0c0 !important;
}
html.dark .el-form-item .el-input[data-v-1dd7ab39] .el-input__wrapper {
  border-color: #404040 !important;
  background: #1e1e20 !important;
  box-shadow: none !important;
}
html.dark .el-form-item .el-input[data-v-1dd7ab39] .el-input__wrapper:hover {
  border-color: #505050 !important;
}
html.dark .el-form-item .el-input[data-v-1dd7ab39] input {
  color: #e0e0e0 !important;
}
html.dark .el-form-item .el-input[data-v-1dd7ab39] input::placeholder {
  color: #666 !important;
}
html.dark .oidc-btn[data-v-1dd7ab39] {
  border-color: #404040 !important;
  color: #e0e0e0 !important;
  background: #1e1e20 !important;
}

/* Focus ring — both modes */
.el-form-item .el-input[data-v-1dd7ab39] .el-input__wrapper:focus-within,
.el-form-item .el-input[data-v-1dd7ab39] .el-input__wrapper.is-focus {
  border-color: var(--nx-red) !important;
  box-shadow: 0 0 0 3px var(--nx-red-light) !important;
}

/* ============================================
   SECONDARY LOGIN (data-v-560059b1)
   ============================================ */
.login-logo[data-v-560059b1] {
  content: url('../nxdoor.svg') !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 8px !important;
}
.login-card[data-v-560059b1] {
  border-radius: 14px !important;
  padding: 48px 40px !important;
  width: 400px !important;
}

html:not(.dark) .login-container[data-v-560059b1] {
  background: linear-gradient(145deg, #faf9f7 0%, #f4f3f1 100%) !important;
}
html:not(.dark) .login-card[data-v-560059b1] {
  background: #ffffff !important;
  border: 1px solid #e8e6e3 !important;
  box-shadow: 0 2px 4px rgba(48,46,44,0.03), 0 8px 24px rgba(48,46,44,0.04) !important;
}
html:not(.dark) .el-form-item[data-v-560059b1] .el-form-item__label {
  color: #3e3b39 !important;
}
html:not(.dark) .el-form-item .el-input[data-v-560059b1] .el-input__wrapper {
  border-color: #d6d3d0 !important;
  background: #faf9f7 !important;
}
html:not(.dark) .el-form-item .el-input[data-v-560059b1] input {
  color: #3e3b39 !important;
}
html:not(.dark) h1[data-v-560059b1] {
  color: #302e2c !important;
}

html.dark .login-container[data-v-560059b1] {
  background: #1a1a1c !important;
}
html.dark .login-card[data-v-560059b1] {
  background: #24252b !important;
  border: 1px solid #363739 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

/* ============================================
   OAUTH / BIND PAGES — both scope variants
   ============================================ */
.oauth[data-v-4b4bb7e4],
.oauth[data-v-f07e104c] {
  border-radius: 14px !important;
}

html:not(.dark) .oauth[data-v-4b4bb7e4],
html:not(.dark) .oauth[data-v-f07e104c] {
  background-color: #faf9f7 !important;
}
html:not(.dark) .oauth .card[data-v-4b4bb7e4],
html:not(.dark) .oauth .card[data-v-f07e104c] {
  background-color: #ffffff !important;
  color: #3e3b39 !important;
  border: 1px solid #e8e6e3 !important;
}
html:not(.dark) .oauth .card .info[data-v-4b4bb7e4] .el-form-item__label,
html:not(.dark) .oauth .card .info[data-v-f07e104c] .el-form-item__label {
  color: #3e3b39 !important;
}

html.dark .oauth[data-v-4b4bb7e4],
html.dark .oauth[data-v-f07e104c] {
  background-color: #1a1a1c !important;
}
html.dark .oauth .card[data-v-4b4bb7e4],
html.dark .oauth .card[data-v-f07e104c] {
  background-color: #24252b !important;
  color: #e0e0e0 !important;
  border: 1px solid #363739 !important;
}

/* ============================================
   HEADER TAGS BAR
   ============================================ */
html:not(.dark) .header-tags[data-v-7221956d] {
  background: #ffffff !important;
  border-bottom-color: #e8e6e3 !important;
}
html.dark .header-tags[data-v-7221956d] {
  background: #1e1e20 !important;
  border-bottom-color: #363739 !important;
}

.tag[data-v-44056da1] {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 13px !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
html:not(.dark) .app-container[data-v-7221956d] {
  background: #faf9f7 !important;
}
html.dark .app-container[data-v-7221956d] {
  background: #141414 !important;
}

/* ============================================
   TABLES — both modes
   ============================================ */
.el-table {
  font-family: 'Source Sans 3', sans-serif !important;
}
.el-table th {
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}
.el-table td {
  font-size: 14px !important;
}

html:not(.dark) .el-table {
  --el-table-border-color: #e8e6e3 !important;
  --el-table-header-bg-color: #f4f3f1 !important;
  --el-table-row-hover-bg-color: #fdf2f3 !important;
  --el-table-bg-color: #ffffff !important;
}
html:not(.dark) .el-table th {
  color: #3e3b39 !important;
}
html:not(.dark) .el-table td {
  color: #4d4a47 !important;
}

/* Dark mode: let Element Plus handle base colours, just override hover */
html.dark .el-table {
  --el-table-row-hover-bg-color: rgba(213,25,40,0.08) !important;
}

/* ============================================
   CARDS
   ============================================ */
.el-card {
  border-radius: 10px !important;
}

html:not(.dark) .el-card {
  --el-card-border-color: #e8e6e3 !important;
  box-shadow: 0 1px 3px rgba(48,46,44,0.03), 0 4px 12px rgba(48,46,44,0.03) !important;
}
html:not(.dark) .el-card__header {
  border-bottom-color: #e8e6e3 !important;
  color: #3e3b39 !important;
}

html.dark .el-card {
  --el-card-border-color: #363739 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

.el-card__header {
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 600 !important;
}

.simple-card[data-v-c1afa130],
.simple-card[data-v-4edee45a] {
  border-radius: 10px !important;
}

/* ============================================
   DIALOGS / MODALS
   ============================================ */
.el-dialog {
  --el-dialog-border-radius: 14px !important;
  border-radius: 14px !important;
}

.el-dialog__header,
.el-dialog__title {
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 600 !important;
}

html:not(.dark) .el-dialog__header,
html:not(.dark) .el-dialog__title {
  color: #302e2c !important;
}

.dialog-form {
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ============================================
   FORM ELEMENTS — global, both modes
   ============================================ */
.el-input__wrapper {
  border-radius: 8px !important;
  transition: border-color 150ms, box-shadow 150ms !important;
}

.el-input__wrapper:focus-within,
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px var(--nx-red-light) !important;
}

.el-select-dropdown__item.is-selected {
  color: var(--nx-red) !important;
  font-weight: 600 !important;
}

.el-pagination.is-background .el-pager li.is-active {
  background-color: var(--nx-red) !important;
}

.el-switch.is-checked .el-switch__core {
  border-color: var(--nx-red) !important;
  background-color: var(--nx-red) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--nx-red) !important;
  border-color: var(--nx-red) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--nx-red) !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--nx-red) !important;
  border-color: var(--nx-red) !important;
}
.el-radio__input.is-checked + .el-radio__label {
  color: var(--nx-red) !important;
}

.el-tabs__active-bar {
  background-color: var(--nx-red) !important;
}
.el-tabs__item.is-active {
  color: var(--nx-red) !important;
}
.el-tabs__item:hover {
  color: var(--nx-red) !important;
}

.el-tag--primary {
  --el-tag-bg-color: var(--nx-red-subtle) !important;
  --el-tag-border-color: var(--nx-red-light) !important;
  --el-tag-text-color: var(--nx-red) !important;
}

/* ============================================
   BUTTONS — all variants, both modes
   ============================================ */
.el-button--primary {
  --el-button-bg-color: var(--nx-red) !important;
  --el-button-border-color: var(--nx-red) !important;
  --el-button-hover-bg-color: var(--nx-red-hover) !important;
  --el-button-hover-border-color: var(--nx-red-hover) !important;
  --el-button-active-bg-color: var(--nx-red-hover) !important;
  --el-button-active-border-color: var(--nx-red-hover) !important;
  --el-button-disabled-bg-color: var(--nx-red-light) !important;
  --el-button-disabled-border-color: var(--nx-red-light) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  border-radius: 8px !important;
}

.el-button--success {
  --el-button-bg-color: var(--nx-green) !important;
  --el-button-border-color: var(--nx-green) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  border-radius: 8px !important;
}

.el-button--warning {
  --el-button-bg-color: var(--nx-amber) !important;
  --el-button-border-color: var(--nx-amber) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  border-radius: 8px !important;
}

.el-button--info {
  --el-button-bg-color: #918d89 !important;
  --el-button-border-color: #918d89 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  border-radius: 8px !important;
}

.el-button--danger,
.el-button--default {
  font-family: 'Source Sans 3', sans-serif !important;
  border-radius: 8px !important;
}

.el-button--primary.is-text,
.el-button--primary.is-link {
  --el-button-text-color: var(--nx-red) !important;
  --el-button-hover-text-color: var(--nx-red-hover) !important;
}

/* ============================================
   STATUS DOTS
   ============================================ */
.dot.green {
  background-color: var(--nx-green) !important;
}
.dot.red {
  background-color: var(--nx-red) !important;
}

/* ============================================
   LINKS — scoped to avoid breaking menus
   ============================================ */
html:not(.dark) a {
  color: var(--nx-red) !important;
}
html:not(.dark) a:hover {
  color: var(--nx-red-hover) !important;
}
html.dark a {
  color: #ea7c84 !important;
}
html.dark a:hover {
  color: var(--nx-red) !important;
}

/* Don't colour sidebar/menu links */
.el-menu-item a,
.el-sub-menu__title a,
.el-menu a {
  color: inherit !important;
}

/* ============================================
   MESSAGES / NOTIFICATIONS
   ============================================ */
.el-message--success {
  --el-message-bg-color: var(--nx-green-bg) !important;
}
.el-message--warning {
  --el-message-bg-color: var(--nx-amber-bg) !important;
}
.el-message--info {
  --el-message-bg-color: var(--nx-blue-bg) !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
html:not(.dark) ::-webkit-scrollbar-track {
  background: #f4f3f1;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #cac7c4;
}
html.dark ::-webkit-scrollbar-track {
  background: #1e1e20;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #404040;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #918d89;
}

/* ============================================
   LOADING / TOOLTIP
   ============================================ */
.el-loading-spinner .circular .path {
  stroke: var(--nx-red) !important;
}
.el-tooltip__trigger:focus-visible {
  outline-color: var(--nx-red) !important;
}