/* ==============================================================================
 * REGTECH NOTEBOOK CUSTOM BRANDING CSS
 * White-label styling: Regtech Blue (#0070f3 / #54b8e8), Dark Mode & Link Hiding
 * ============================================================================== */

/* ------------------------------------------------------------------------------
 * 1. Global & TDesign Theme Variables (Highest Specificity)
 * ------------------------------------------------------------------------------ */
:root,
:root:root,
:root[theme-mode="light"],
:root:root[theme-mode="light"],
html[theme-mode="light"],
[theme-mode="light"] {
  --brand-main: #0077d6 !important;
  --td-brand-color: #0077d6 !important;
  --td-brand-color-hover: #1f8eee !important;
  --td-brand-color-active: #005fb8 !important;
  --td-brand-color-light: #e6f4ff !important;
  --td-brand-color-focus: rgba(0, 119, 214, 0.25) !important;
  --td-brand-color-disabled: #8ec5fc !important;
  --td-brand-color-1: #e6f4ff !important;
  --td-brand-color-2: #bae0ff !important;
  --td-brand-color-3: #91caff !important;
  --td-brand-color-4: #69b1ff !important;
  --td-brand-color-5: #4096ff !important;
  --td-brand-color-6: #0077d6 !important;
  --td-brand-color-7: #005fb8 !important;
  --td-brand-color-8: #004791 !important;
  --td-brand-color-9: #00316b !important;
  --td-brand-color-10: #001d47 !important;
  --td-success-color-light: #e6f4ff !important;
  --td-text-color-brand: #0077d6 !important;
  --td-text-color-link: #0077d6 !important;
  --app-focus-border: #0077d6 !important;
}

:root[theme-mode="dark"],
:root:root[theme-mode="dark"],
:root.dark,
html[theme-mode="dark"],
[theme-mode="dark"] {
  --brand-main: #54b8e8 !important;
  --td-brand-color: #54b8e8 !important;
  --td-brand-color-hover: #75c7ee !important;
  --td-brand-color-active: #39a6dd !important;
  --td-brand-color-light: rgba(84, 184, 232, 0.15) !important;
  --td-brand-color-focus: rgba(84, 184, 232, 0.28) !important;
  --td-brand-color-disabled: #184e68 !important;
  --td-brand-color-1: rgba(84, 184, 232, 0.12) !important;
  --td-brand-color-2: #0e3d55 !important;
  --td-brand-color-3: #185575 !important;
  --td-brand-color-4: #246e96 !important;
  --td-brand-color-5: #3388b7 !important;
  --td-brand-color-6: #54b8e8 !important;
  --td-brand-color-7: #75c7ee !important;
  --td-brand-color-8: #98d6f4 !important;
  --td-brand-color-9: #bce5f9 !important;
  --td-brand-color-10: #e0f4fd !important;
  --td-success-color-light: rgba(84, 184, 232, 0.15) !important;
  --td-text-color-brand: #54b8e8 !important;
  --td-text-color-link: #54b8e8 !important;
  --app-focus-border: #54b8e8 !important;
}

/* ------------------------------------------------------------------------------
 * 2. Login Page Styling & Regtech Blue Gradient
 * ------------------------------------------------------------------------------ */
.login-layout {
  background: linear-gradient(225deg, #06182c 0%, #092547 15%, #0c3563 25%, #0d4681 38%, #005fb8 50%, #0077d6 65%, #2392e6 78%, #54b8e8 90%, #8fd8fb 100%) !important;
}

html[theme-mode="dark"] .login-layout {
  background: linear-gradient(225deg, #030d1a 0%, #06182c 15%, #0a2544 25%, #0d345e 38%, #0a4377 50%, #0d589b 65%, #156eb8 78%, #2687d6 90%, #54b8e8 100%) !important;
}

/* Ẩn các nút GitHub, Official Website trên Header và toàn trang */
.header-links .header-link[href*="weknora"],
.header-links .header-link[href*="github.com"],
a[href*="github.com"],
a[href*="weknora.weixin.qq.com"],
a[href*="wechat"],
.header-link:has(svg[data-icon="github"]),
.header-link:has(.t-icon-logo-github) {
  display: none !important;
}

/* Vô hiệu hóa click chuyển trang ngoài ở Logo Header */
.header-logo {
  pointer-events: none !important;
  cursor: default !important;
}

.header-logo .logo-image {
  max-height: 38px !important;
  max-width: 180px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
}

html[theme-mode="dark"] .header-logo .logo-image {
  filter: none !important;
}

/* Đổi tiêu đề 'New to WeKnora?' thành 'New to Notebook?' */
.register-cta__divider span {
  font-size: 0 !important;
}
.register-cta__divider span::after {
  content: "New to Notebook?" !important;
  font-size: var(--app-text-sm, 14px) !important;
  color: var(--td-text-color-secondary, rgba(255, 255, 255, 0.55)) !important;
}

/* Đổi mô tả đăng nhập sang Notebook by Regtech */
.login-header .subtitle {
  font-size: 0 !important;
}
.login-header .subtitle::after {
  content: "Notebook — Enterprise Knowledge Platform by Regtech" !important;
  font-size: 13px !important;
  color: var(--td-text-color-secondary, rgba(255, 255, 255, 0.55)) !important;
  display: block !important;
}

/* Icon tính năng trang đăng nhập sang màu Xanh Dương */
.login-features .feature-icon,
.login-features .feature-item .feature-icon {
  background: rgba(84, 184, 232, 0.2) !important;
  color: var(--td-brand-color) !important;
}

.screenshot-swiper .swiper-pagination-bullet-active {
  background: var(--td-brand-color) !important;
}

/* ------------------------------------------------------------------------------
 * 3. Buttons & Interactive Controls (Regtech Blue)
 * ------------------------------------------------------------------------------ */
.t-button--theme-primary:not(.t-button--link),
.submit-button,
button.t-button--theme-primary {
  background-color: var(--td-brand-color) !important;
  border-color: var(--td-brand-color) !important;
  color: #ffffff !important;
}

.t-button--theme-primary:not(.t-button--link):hover,
.submit-button:hover,
button.t-button--theme-primary:hover {
  background-color: var(--td-brand-color-hover) !important;
  border-color: var(--td-brand-color-hover) !important;
}

.t-button--theme-primary:not(.t-button--link):active,
.submit-button:active,
button.t-button--theme-primary:active {
  background-color: var(--td-brand-color-active) !important;
  border-color: var(--td-brand-color-active) !important;
}

.register-cta__button {
  background: transparent !important;
  border-color: var(--td-brand-color) !important;
  color: var(--td-brand-color) !important;
}

.register-cta__button:hover {
  border-color: var(--td-brand-color-active) !important;
  color: var(--td-brand-color-active) !important;
  background: var(--td-brand-color-light) !important;
}

/* Input focus state */
.t-input:focus-within,
.t-input--focused,
.form-content .t-input:focus-within {
  border-color: var(--td-brand-color) !important;
  box-shadow: 0 0 0 3px var(--td-brand-color-focus) !important;
}

/* ------------------------------------------------------------------------------
 * 4. Sidebar Menu, Active States & Brand Accents
 * ------------------------------------------------------------------------------ */
.aside_box .logo_row {
  height: 52px !important;
  align-items: center !important;
}

.aside_box .logo_box {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.aside_box .logo_box .logo {
  width: auto !important;
  max-width: 140px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  margin: auto 0 !important;
  filter: none !important;
}

html[theme-mode="dark"] .aside_box .logo_box .logo {
  filter: none !important;
}

/* Sidebar active item: icon filter sang màu Xanh Dương và chữ theo màu brand */
.aside_box .menu_item_active .menu_icon img.icon,
.aside_box .menu_item_active .menu_icon svg,
.aside_box .menu_item_active .t-icon {
  filter: hue-rotate(55deg) brightness(1.2) !important;
  color: var(--td-brand-color) !important;
}

.aside_box .menu_item_active .menu_title {
  color: var(--td-brand-color) !important;
  font-weight: 600 !important;
}

/* Tags, Badges & Workspace highlights */
.t-tag--theme-primary,
.org-tag,
.kb-wiki-badge,
.btn-icon-wrapper,
.shared-detail-trigger {
  color: var(--td-brand-color) !important;
}

.t-tag--theme-primary {
  background-color: var(--td-brand-color-light) !important;
  border-color: var(--td-brand-color) !important;
}

/* Radio buttons & checked states */
.t-radio-group .t-radio-button.t-is-checked,
.t-radio-group .t-radio-button.t-is-checked .t-radio-button__label,
.t-radio-group .t-radio-button.t-is-checked > span {
  background: var(--td-brand-color) !important;
  border-color: var(--td-brand-color) !important;
}