@import './tokens.less';

body,
html {
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: @font-ui;
  background-color: @color-base;
  background-image: radial-gradient(ellipse at 60% 0%, rgba(224,74,56,0.05) 0%, transparent 55%);
  background-attachment: fixed;
}

@media (max-width: 768px) {
  body, html {
    background-attachment: scroll;
  }
}

// Semi UI theme overrides
body {
  --semi-color-bg-0: @color-base !important;
  --semi-color-bg-1: @color-surface !important;
  --semi-color-bg-2: @color-elevated !important;
  --semi-color-bg-3: @color-border !important;
  --semi-color-border: @color-border !important;
  --semi-color-primary: @color-accent !important;
  --semi-color-primary-hover: @color-accent-dim !important;
  --semi-color-primary-active: @color-accent-dim !important;
  --semi-color-primary-light-default: rgba(224,74,56,0.12) !important;
  --semi-color-primary-light-hover: rgba(224,74,56,0.18) !important;
  --semi-color-primary-light-active: rgba(224,74,56,0.22) !important;
  --semi-color-text-0: @color-text !important;
  --semi-color-text-1: @color-text !important;
  --semi-color-text-2: @color-muted !important;
  --semi-color-text-3: @color-faint !important;
  --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;
  --semi-font-family: @font-ui !important;
}

// Semi table row overrides
.semi-table-row-head {
  background-color: rgba(255,255,255,0.06) !important;
}
.semi-table-row-head .semi-table-row-cell {
  background-color: rgba(255,255,255,0.06) !important;
  color: @color-muted !important;
  font-size: @text-xs;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.semi-table-row-cell {
  background-color: @color-surface !important;
}
.semi-table-tbody .semi-table-row:nth-child(even) .semi-table-row-cell {
  background-color: @color-base !important;
}
.semi-table-tbody .semi-table-row:hover .semi-table-row-cell {
  background-color: @color-elevated !important;
}

// Scrollbar
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: @color-surface; }
::-webkit-scrollbar-thumb { background: @color-border-bright; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: @color-muted; }

.semi-icon:not(.semi-tabs-bar .semi-tabs-tab .semi-icon):not(.semi-checkbox .semi-icon) {
  vertical-align: middle;
}

// Suppress focus outlines — Semi uses --semi-color-primary (our red) for all rings
button:focus,
button:focus-visible,
.semi-button:focus,
.semi-button:focus-visible,
.semi-input-wrapper:focus-within,
.semi-select:focus-within,
[tabindex]:focus {
  outline: none !important;
  box-shadow: none !important;
}

.semi-input-wrapper-focus {
  border-color: @color-border-bright !important;
  box-shadow: none !important;
}

// Semi Modal dark theme overrides
.semi-modal-content {
  background: #161616 !important;
  border: 1px solid @color-border !important;
  border-top: 3px solid @color-accent !important;
  border-radius: 14px !important;
}

.semi-modal-header {
  background: transparent !important;
  border-bottom: 1px solid @color-border !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 20px 24px 16px !important;
}

.semi-modal-mask {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}