/* Hero Metadata: charcoal branding and neutral enterprise surfaces.
 * Author: xiongyilin@heroesports.com | Date: 2026-10-26
 * Keep semantic status colors. Use neutral surfaces for the information hierarchy.
 */
:root {
  --hero-brand: #3f3f46;
  --hero-brand-strong: #18181b;
  --hero-black: #18181b;
  --hero-ink: #27272a;
  --hero-muted: #71717a;
  --hero-canvas: #ffffff;
  --ant-primary-1: #f5f5f5 !important;
  --ant-primary-2: #ededed !important;
  --tw-color-brand-25: #fafafa;
  --tw-color-brand-50: #f5f5f5;
  --tw-color-brand-200: #dedede;
  --tw-color-utility-brand-50: #f5f5f5;
  --tw-color-utility-brand-200: #dedede;
  --tw-background-color-brand-primary: #f5f5f5;
}

/* A quiet navigation rail on every authenticated page. */
[data-testid='left-sidebar'],
[data-testid='left-sidebar'] .ant-layout-sider-children,
[data-testid='left-sidebar'] .logo-container,
[data-testid='left-sidebar'] .left-sidebar-menu,
[data-testid='left-sidebar'] .ant-menu-sub {
  background: #fafafa !important;
}
[data-testid='left-sidebar'] {
  border-right: 1px solid #e7e7e9;
}
[data-testid='left-sidebar'] .ant-menu-item,
[data-testid='left-sidebar'] .ant-menu-submenu-title {
  color: #606068 !important;
  border-radius: 6px !important;
  transition: background-color 160ms ease, color 160ms ease;
}
aside.ant-layout-sider[data-testid='left-sidebar'] .left-sidebar-menu.ant-menu:is(.ant-menu-inline, .ant-menu-vertical) :is(.ant-menu-item, .ant-menu-submenu-title) {
  height: 44px !important;
  padding: 10px 12px !important;
  margin-bottom: 4px !important;
}
[data-testid='left-sidebar'] .ant-menu-item-icon {
  font-size: 20px !important;
}
[data-testid='left-sidebar'] .ant-menu-item .left-panel-label,
[data-testid='left-sidebar'] .ant-menu-item .anticon,
[data-testid='left-sidebar'] .ant-menu-submenu-title .anticon,
[data-testid='left-sidebar'] .ant-menu-submenu-title .ant-menu-title-content,
[data-testid='left-sidebar'] .ant-menu-submenu-arrow {
  color: inherit !important;
}
[data-testid='left-sidebar'] .ant-menu-item:hover,
[data-testid='left-sidebar'] .ant-menu-submenu-title:hover,
[data-testid='left-sidebar'] .ant-menu-item-active,
[data-testid='left-sidebar'] .ant-menu-submenu-active > .ant-menu-submenu-title {
  background: #f0f0f2 !important;
  color: #27272a !important;
}
[data-testid='left-sidebar'] .ant-menu-item-selected,
[data-testid='left-sidebar'] .ant-menu-submenu-selected > .ant-menu-submenu-title {
  background: #eaeaec !important;
  color: #18181b !important;
  box-shadow: none;
}
[data-testid='left-sidebar'] .ant-menu-item-selected .anticon,
[data-testid='left-sidebar'] .ant-menu-submenu-selected > .ant-menu-submenu-title .anticon {
  color: var(--hero-brand) !important;
}
[data-testid='left-sidebar'] .bottom-menu {
  border-top-color: #e7e7e9 !important;
}
.app-container,
.app-container > .ant-layout {
  background: var(--hero-canvas) !important;
}
.app-container > .ant-layout > .ant-layout-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e9e9e9;
}
[data-testid='profile-avatar'] {
  background: #f2f2f2 !important;
  color: #333333 !important;
  border-color: #d6d6d6 !important;
}

/* Keep search and data cards on one continuous, light workspace. */
.customise-landing-page-header {
  background: #ffffff !important;
  border: 1px solid #e7e7e9;
  border-radius: 8px !important;
  padding: 8px !important;
}
.customise-landing-page-header .overlapped-container:empty {
  display: none;
}
.my-data-page-main-container .grid-wrapper .grid-container {
  margin-top: 20px !important;
  padding: 0 !important;
}
.customise-landing-page-header .dashboard-header {
  max-width: 100%;
  padding: 24px;
}
.dashboard-header > .d-flex {
  justify-content: flex-start !important;
}
.dashboard-header .welcome-user {
  color: var(--hero-ink) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px;
}
.dashboard-header .customise-search-container {
  margin-bottom: 0 !important;
}
.dashboard-header .customise-search-container > .d-flex {
  margin-bottom: 20px !important;
}
.customise-landing-page-header .ant-carousel {
  margin-bottom: 0 !important;
}
.customise-landing-page-header .search-input,
.customise-landing-page-header .domain-selector {
  border: 1px solid #dcdce0 !important;
  border-radius: 6px !important;
  background: #fafafa !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 2%);
}
.customise-landing-page-header .recent-item .entity-icon-container {
  background: #f4f4f5 !important;
  border: 1px solid #e7e7e9;
}
.customise-landing-page-header .recent-item .text-white {
  color: #52525b !important;
}
.customise-landing-page-header .ant-carousel .slick-arrow {
  color: #52525b !important;
  background: #f4f4f5 !important;
}
.widget-wrapper-container.ant-card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 2%);
}
.feed-widget-body a {
  color: #3f3f46 !important;
}
.feed-widget-body a:hover {
  color: var(--hero-brand-strong) !important;
  text-decoration: underline;
}
.widget-wrapper-container .app-badge.data-asset-badge {
  background: #f4f4f5 !important;
  border-color: #e7e7e9 !important;
}
.widget-wrapper-container .app-badge.data-asset-badge .ant-typography {
  color: #52525b !important;
}
.whats-new-alert-affix .whats-new-alert-left {
  background: #f4f4f5 !important;
  border-right: 1px solid #e7e7e9;
}
.whats-new-alert-affix .whats-new-alert-left * {
  color: #52525b !important;
}
.whats-new-alert-links a.ant-btn {
  color: var(--hero-ink) !important;
}
.whats-new-alert-links a.ant-btn:hover {
  color: var(--hero-brand-strong) !important;
}
.welcome-screen-header-divider {
  border-top-color: #e5e5e5 !important;
}

/* The sign-in brand panel uses real semantic content in place of the demo video. */
[data-testid='signin-page'] > div:first-child {
  background: #f7f7f8 !important;
  border-right: 1px solid #e7e7e9;
}
[data-testid='signin-page'] > div:first-child > div {
  padding: clamp(32px, 5vw, 80px);
}
[data-testid='signin-page'] > div:first-child > div > div {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
}
.hero-login-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  color: var(--hero-ink);
}
.hero-login-wordmark {
  display: block;
  width: 154px;
  height: auto;
  object-fit: contain;
}
.hero-login-copy {
  margin: 32px 0;
}
.hero-login-eyebrow {
  margin: 0 0 24px;
  color: #71717a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
}
.hero-login-heading {
  margin: 0 0 30px;
  color: var(--hero-ink);
  font-size: clamp(36px, 3.5vw, 56px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -1px;
}
.hero-login-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 28px;
  background: var(--hero-brand);
}
.hero-login-description {
  margin: 0;
  color: #71717a;
  font-size: 14px;
  line-height: 1.9;
}
.hero-login-footer {
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e3;
  color: #71717a;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-form-container[data-testid='login-form-container'] .login-box {
  box-shadow: none;
  border-radius: 0;
  background: #ffffff;
}
.login-form-container[data-testid='login-form-container'] .login-box .header-text {
  color: var(--hero-black) !important;
  font-weight: 650;
  letter-spacing: -0.5px;
}
.login-form-container[data-testid='login-form-container'] .login-box .input-field,
.login-form-container[data-testid='login-form-container'] .login-box #password {
  background: #ffffff !important;
  border-radius: 6px;
}
.login-form-container[data-testid='login-form-container'] .login-box .input-field:focus,
.login-form-container[data-testid='login-form-container'] .login-box .ant-input-affix-wrapper-focused {
  box-shadow: 0 0 0 2px rgb(17 17 17 / 8%);
  border-color: #555555;
}
.login-form-container[data-testid='login-form-container'] .login-box .forgot-password-link {
  color: #636363;
}
.login-form-container[data-testid='login-form-container'] .login-box .forgot-password-link:hover {
  color: var(--hero-brand-strong);
}
.login-form-container[data-testid='login-form-container'] .login-box .login-btn {
  height: 46px;
  border-radius: 6px;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-testid='left-sidebar'] .ant-menu-item,
  [data-testid='left-sidebar'] .ant-menu-submenu-title {
    transition: none;
  }
}

.hero-sql-dialog{width:min(1180px,94vw);height:min(860px,90vh);max-width:94vw;max-height:90vh;padding:0;border:1px solid #dedee4;border-radius:12px;color:#222;background:#fff;box-shadow:0 16px 60px #0004}
.hero-sql-dialog::backdrop{background:#0006}
.hero-sql-dialog[open]{display:flex;flex-direction:column}
.hero-sql-dialog header,.hero-sql-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;flex-shrink:0}
.hero-sql-dialog header{border-bottom:1px solid #e8e8ec}
.hero-sql-dialog footer{border-top:1px solid #e8e8ec;font-size:13px;color:#666}
.hero-sql-dialog h2{font-size:18px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.hero-sql-dialog .hero-sql-code{flex:1;min-height:0;margin:0;padding:20px 24px;overflow:auto;background:#fafafa;white-space:pre;tab-size:2;font:13px/1.7 Consolas,"Microsoft YaHei",monospace;user-select:text}
.query-card-container .sql-editor-container.h-24,
.query-card-container .sql-editor-container.h-max-24,
.query-card-container .sql-editor-container.h-max-56 {
  height: clamp(320px, 52vh, 600px) !important;
  max-height: none !important;
}
.query-card-container .sql-editor-container .CodeMirror {
  height: 100% !important;
  font-size: 14px;
  line-height: 1.6;
}
.query-card-container .sql-editor-container:has(.hero-sql-inline-code) {
  overflow: hidden !important;
  min-width: 0;
  max-width: 100%;
}
.query-card-container .hero-sql-inline-code {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 18px 22px;
  overflow: auto !important;
  white-space: pre;
  tab-size: 2;
  font: 14px/1.6 Consolas,"Microsoft YaHei",monospace;
  color: #24252b;
  background: #f5f7fa;
  user-select: text;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.query-card-container .sql-editor-container:has(.hero-sql-expanded) {
  height: clamp(320px, 75vh, 1000px) !important;
}
.hero-sql-inline-code .cm-keyword,.hero-sql-code .cm-keyword { color: #8a078f; }
.hero-sql-inline-code .cm-atom,.hero-sql-code .cm-atom { color: #6200aa; }
.hero-sql-inline-code .cm-number,.hero-sql-code .cm-number { color: #176c3b; }
.hero-sql-inline-code .cm-string,.hero-sql-code .cm-string { color: #a31515; }
.hero-sql-inline-code .cm-comment,.hero-sql-code .cm-comment { color: #a55c00; }
.hero-sql-inline-code .cm-builtin,.hero-sql-code .cm-builtin { color: #005cc5; }
.hero-sql-inline-code .cm-variable-2,.hero-sql-code .cm-variable-2 { color: #005cc5; }
.hero-sql-inline-code .cm-variable-3,.hero-sql-code .cm-variable-3 { color: #007f73; }
.hero-sql-inline-code .cm-operator,.hero-sql-code .cm-operator { color: #555; }
.hero-sql-inline-code .cm-bracket,.hero-sql-code .cm-bracket { color: #725b08; }