/*
 * Horizon V12 — brand bridge + component precision.
 * Horizon BuilderKit remains the source of truth for light/dark surfaces.
 * The admin setting `client_primary_color` is the single source of truth for
 * system brand/primary actions in landing, auth, client and admin.
 */

/* 1) Never replace the configured brand colour with Horizon's neutral black/white primary. */
:root,
html[data-theme="light"],
html[data-theme="dark"],
html.dark {
  --hz-primary: var(--ui-accent, #2563eb) !important;
  --hz-primary-rgb: var(--ui-accent-rgb, 37, 99, 235) !important;
  --hz-primary-foreground: var(--ui-accent-foreground, #fff) !important;
  --hz-sidebar-primary: var(--ui-accent, #2563eb) !important;
  --hz-sidebar-primary-foreground: var(--ui-accent-foreground, #fff) !important;
  --hz-ring: var(--ui-accent, #2563eb) !important;
  --bs-primary: var(--ui-accent, #2563eb) !important;
  --bs-primary-rgb: var(--ui-accent-rgb, 37, 99, 235) !important;
}
body.horizon,
body.horizon[data-theme="light"],
body.horizon[data-theme="dark"] {
  --hz-primary: var(--ui-accent, #2563eb) !important;
  --hz-primary-rgb: var(--ui-accent-rgb, 37, 99, 235) !important;
  --hz-primary-foreground: var(--ui-accent-foreground, #fff) !important;
  --hz-sidebar-primary: var(--ui-accent, #2563eb) !important;
  --hz-sidebar-primary-foreground: var(--ui-accent-foreground, #fff) !important;
  --hz-ring: var(--ui-accent, #2563eb) !important;
}
html[data-theme="light"], body.horizon[data-theme="light"] { --hz-primary-hover: color-mix(in srgb, var(--ui-accent, #2563eb) 86%, #000); }
html[data-theme="dark"], html.dark, body.horizon[data-theme="dark"] { --hz-primary-hover: color-mix(in srgb, var(--ui-accent, #2563eb) 84%, #fff); }

/* 2) Primary controls, including legacy btn-dark/save buttons, always follow Admin > Giao diện Client. */
body.horizon :is(
  .btn-primary,.btn-dark,.btn-gradient,.btn-gradient-sm,.btn-save,.save-btn,.submit-btn,.add-btn,
  .btn-login,.login-do-btn,.hz-primary-button,.profile-btn-v3--primary,.tcb-btn-primary,
  .captcha-btn--primary,.captcha-primary-action,.filter-btn,.admin-overview__button--primary,
  .renew-pay-button,.theme-preview button
) {
  background: var(--hz-primary) !important;
  background-image: none !important;
  border-color: var(--hz-primary) !important;
  color: var(--hz-primary-foreground) !important;
  -webkit-text-fill-color: var(--hz-primary-foreground) !important;
  box-shadow: none !important;
}
body.horizon :is(
  .btn-primary,.btn-dark,.btn-gradient,.btn-gradient-sm,.btn-save,.save-btn,.submit-btn,.add-btn,
  .btn-login,.login-do-btn,.hz-primary-button,.profile-btn-v3--primary,.tcb-btn-primary,
  .captcha-btn--primary,.captcha-primary-action,.filter-btn,.admin-overview__button--primary,
  .renew-pay-button,.theme-preview button
):is(:hover,:focus-visible,:active) {
  background: var(--hz-primary-hover, var(--hz-primary)) !important;
  border-color: var(--hz-primary-hover, var(--hz-primary)) !important;
  color: var(--hz-primary-foreground) !important;
  -webkit-text-fill-color: var(--hz-primary-foreground) !important;
}
body.horizon :is(.btn-outline-primary,.border-primary) { border-color: var(--hz-primary) !important; }
body.horizon .btn-outline-primary { color: var(--hz-primary) !important; background: transparent !important; -webkit-text-fill-color: var(--hz-primary) !important; }
body.horizon .btn-outline-primary:hover { color: var(--hz-primary-foreground) !important; -webkit-text-fill-color: var(--hz-primary-foreground) !important; background: var(--hz-primary) !important; }
body.horizon :is(.text-primary,.link-primary) { color: var(--hz-primary) !important; -webkit-text-fill-color: var(--hz-primary) !important; }
body.horizon :is(.bg-primary,.badge-primary) { background-color: var(--hz-primary) !important; color: var(--hz-primary-foreground) !important; }

/* Active/navigation states use brand colour rather than black. */
body.horizon :is(.hz-nav-row.is-active,.hz-subnav a.is-active,.nav-link.active,.tab-link.active,[aria-current="page"]) {
  color: var(--hz-primary) !important;
  -webkit-text-fill-color: var(--hz-primary) !important;
}
body.horizon .hz-nav-row.is-active {
  background: color-mix(in srgb, var(--hz-primary) 11%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--hz-primary) !important;
}
body.horizon .tab-link.active { border-bottom-color: var(--hz-primary) !important; }
body.horizon :is(a.hz-auth-link,.hz-connect-form a,.form-text a,.help-block a) { color: var(--hz-primary) !important; }

/* 3) Compact actions stay visually distinct, while remaining light/dark aware. */
body.horizon :is(.btn-info.btn-sm,.action-icon.bg-info,.action-btn--view,.admin-action--view) {
  background: var(--hz-info) !important; border-color: var(--hz-info) !important; color: #fff !important; -webkit-text-fill-color:#fff !important;
}
body.horizon :is(.btn-success.btn-sm,.action-icon.bg-success,.action-btn--enable,.admin-action--enable) {
  background: var(--hz-success) !important; border-color: var(--hz-success) !important; color: #fff !important; -webkit-text-fill-color:#fff !important;
}
body.horizon :is(.btn-warning.btn-sm,.action-icon.bg-warning,.action-btn--edit,.admin-action--edit) {
  background: var(--hz-warning) !important; border-color: var(--hz-warning) !important; color: #191919 !important; -webkit-text-fill-color:#191919 !important;
}
body.horizon :is(.btn-danger.btn-sm,.action-icon.bg-danger,.action-btn--delete,.admin-action--delete) {
  background: var(--hz-danger) !important; border-color: var(--hz-danger) !important; color: #fff !important; -webkit-text-fill-color:#fff !important;
}
body.horizon :is(.action-icon,.btn-icon,.hz-icon-button) > :is(i,svg) { color: currentColor !important; fill: none; }

/* 4) Checkbox/consent rows: checkbox is a real first column, never outside or on top of the label. */
body.horizon .hz-connect-form .form-check:not(.form-switch),
body.horizon .hz-auth-check {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 10px 0 16px !important;
  padding: 11px 12px !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 10px !important;
  background: var(--hz-card) !important;
  box-shadow: none !important;
}
body.horizon .hz-connect-form .form-check:not(.form-switch) > .form-check-input,
body.horizon .hz-auth-check > input[type="checkbox"] {
  position: static !important;
  inset: auto !important;
  float: none !important;
  display: block !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--hz-input) !important;
  border-radius: 4px !important;
  background: var(--hz-surface) !important;
  box-shadow: none !important;
  accent-color: var(--hz-primary) !important;
  transform: none !important;
}
body.horizon .hz-connect-form .form-check:not(.form-switch) > .form-check-input:checked,
body.horizon .hz-auth-check > input[type="checkbox"]:checked {
  border-color: var(--hz-primary) !important;
  background-color: var(--hz-primary) !important;
}
body.horizon .hz-connect-form .form-check:not(.form-switch) > .form-check-label,
body.horizon .hz-auth-check > label {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--hz-muted) !important;
  font-size: 12px !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}

/* 5) Keep field/icon geometry predictable and aligned. */
body.horizon :is(.input-group,.hz-auth-control,.profile-input-v3,.account-token-control,.admin-input-suffix) > :is(i,svg,.input-group-text,button,.btn) {
  flex-shrink: 0 !important;
}
body.horizon :is(.input-group,.hz-auth-control,.profile-input-v3,.account-token-control,.admin-input-suffix) :is(i,svg) {
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
}

/* 6) Focus follows the configured brand colour everywhere. */
body.horizon :is(input,select,textarea,button,a,.btn):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--hz-primary) 55%, transparent) !important;
  outline-offset: 2px !important;
}
body.horizon form :is(input,select,textarea,.form-control,.form-select):focus {
  border-color: var(--hz-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hz-primary) 18%, transparent) !important;
}

/* Legacy compact dark actions are intentionally semantic, not black. */
body.horizon .action-icon.bg-dark { background: var(--hz-purple) !important; border-color: var(--hz-purple) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
body.horizon .action-icon.bg-primary { background: var(--hz-primary) !important; color: var(--hz-primary-foreground) !important; -webkit-text-fill-color:var(--hz-primary-foreground) !important; }
body.horizon .action-icon.bg-info { background: var(--hz-info) !important; color:#fff !important; }
body.horizon .action-icon.bg-success { background: var(--hz-success) !important; color:#fff !important; }
body.horizon .action-icon.bg-warning { background: var(--hz-warning) !important; color:#191919 !important; }
body.horizon .action-icon.bg-danger { background: var(--hz-danger) !important; color:#fff !important; }