/* MiaoLiCi Dashboard Theme - MiaoLiCi */
/* Maps design tokens to semi-ui CSS variables */

:root, body, body[theme-mode="dark"] {
  /* Surface colors */
  --semi-color-bg-0: #1a1a1a !important;
  --semi-color-bg-1: #1a1a1a !important;
  --semi-color-bg-2: #222222 !important;
  --semi-color-bg-3: #2a2a2a !important;
  --semi-color-bg-4: #333333 !important;
  --semi-color-nav-bg: rgba(20,20,20,0.85) !important;

  /* Text colors */
  --semi-color-text-0: #f9f9f9 !important;
  --semi-color-text-1: #f4f1e2 !important;
  --semi-color-text-2: rgba(249,249,249,0.6) !important;
  --semi-color-text-3: rgba(249,249,249,0.4) !important;

  /* Primary / accent */
  --semi-color-primary: #f0902d !important;
  --semi-color-primary-hover: #f5a54e !important;
  --semi-color-primary-active: #d87a1f !important;
  --semi-color-primary-disabled: rgba(240,144,45,0.4) !important;
  --semi-color-primary-light-default: rgba(240,144,45,0.1) !important;
  --semi-color-primary-light-hover: rgba(240,144,45,0.15) !important;
  --semi-color-primary-light-active: rgba(240,144,45,0.2) !important;

  /* Fill */
  --semi-color-fill-0: rgba(255,255,255,0.04) !important;
  --semi-color-fill-1: rgba(255,255,255,0.06) !important;
  --semi-color-fill-2: rgba(255,255,255,0.08) !important;

  /* Border */
  --semi-color-border: rgba(255,255,255,0.08) !important;
  --semi-color-focus-border: #f0902d !important;
  --semi-color-disabled-border: rgba(255,255,255,0.05) !important;
  --semi-color-disabled-fill: rgba(255,255,255,0.03) !important;

  /* Shadow */
  --semi-shadow-elevated: 0px 4px 18px rgba(0,0,0,0.15) !important;
  --semi-color-shadow: rgba(0,0,0,0.3) !important;

  /* Radius */
  --semi-border-radius-extra-small: 3px !important;
  --semi-border-radius-small: 10px !important;
  --semi-border-radius-medium: 12px !important;
  --semi-border-radius-large: 16px !important;
  --semi-border-radius-full: 9999px !important;

  /* Typography */
  --semi-font-family: 'Lato', 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif !important;
}

/* Force dark background with pixel grid */
body {
  background: #0a0a0a !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  color: #f9f9f9 !important;
  font-family: 'Lato', 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif !important;
  font-size: 17px !important;
}

/* Navigation sidebar */
.semi-layout-sider,
.semi-navigation {
  background: rgba(15,15,15,0.9) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Navigation items */
.semi-navigation-item {
  color: rgba(249,249,249,0.6) !important;
  border-radius: 10px !important;
}
.semi-navigation-item:hover,
.semi-navigation-item-selected {
  background: rgba(255,255,255,0.06) !important;
  color: #f9f9f9 !important;
}
.semi-navigation-item-selected {
  color: #f0902d !important;
}

/* Header / top bar */
.semi-layout-header {
  background: rgba(10,10,10,0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Cards - glassmorphism */
.semi-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.semi-card:hover {
  border-color: rgba(255,255,255,0.18) !important;
}

/* Tables */
.semi-table-wrapper {
  background: transparent !important;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head {
  background: rgba(255,255,255,0.03) !important;
  color: rgba(249,249,249,0.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: #f9f9f9 !important;
}
.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
  background: rgba(255,255,255,0.03) !important;
}

/* Buttons */
.semi-button-primary {
  background: #f0902d !important;
  border-color: #f0902d !important;
  color: #000 !important;
  font-weight: 600 !important;
}
.semi-button-primary:hover {
  background: #f5a54e !important;
  border-color: #f5a54e !important;
}
.semi-button-secondary,
.semi-button-tertiary {
  color: #f9f9f9 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.semi-button-secondary:hover,
.semi-button-tertiary:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Inputs */
.semi-input-wrapper,
.semi-select {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #f9f9f9 !important;
}
.semi-input-wrapper:hover,
.semi-select:hover {
  border-color: rgba(255,255,255,0.15) !important;
}
.semi-input-wrapper-focus,
.semi-select-focus {
  border-color: #f0902d !important;
}
.semi-input {
  color: #f9f9f9 !important;
}
.semi-input::placeholder {
  color: rgba(249,249,249,0.4) !important;
}

/* Modals / Dialogs */
.semi-modal-content {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
}
.semi-modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.semi-modal-footer {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Tags / Badges */
.semi-tag {
  border-radius: 9999px !important;
}
.semi-tag-default {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(249,249,249,0.6) !important;
}

/* Tabs */
.semi-tabs-bar {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.semi-tabs-tab {
  color: rgba(249,249,249,0.6) !important;
}
.semi-tabs-tab-active {
  color: #f0902d !important;
}
.semi-tabs-ink-bar {
  background: #f0902d !important;
}

/* Tooltip / Popover */
.semi-tooltip-wrapper,
.semi-popover {
  background: #222222 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
}

/* Dropdown */
.semi-dropdown-menu {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
.semi-dropdown-item:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* Layout content area */
.semi-layout-content {
  background: transparent !important;
}
.semi-layout {
  background: transparent !important;
}

/* Pagination */
.semi-page-item {
  color: rgba(249,249,249,0.6) !important;
}
.semi-page-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #f9f9f9 !important;
}
.semi-page-item-active {
  background: #f0902d !important;
  color: #000 !important;
}

/* Toast / Notification */
.semi-toast-wrapper {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}

/* Focus visible */
*:focus-visible {
  outline: 2px solid #f0902d !important;
  outline-offset: 2px !important;
}

/* Override any white backgrounds */
[style*="background: rgb(255, 255, 255)"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"] {
  background: #111111 !important;
}

/* Home link override - position better */
.fr-home-link {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 9999 !important;
}