/* QHItech Customer Panel Canon v1 — shared by every non-AtomiQ customer panel. */
:root {
  --qhi-panel-max: 1380px;
  --qhi-panel-nav: 252px;
  --qhi-panel-gap: 22px;
  --qhi-panel-radius: 22px;
  --qhi-panel-radius-sm: 14px;
  --qhi-panel-shadow: 0 18px 54px rgba(7, 24, 49, .09);
}

body.qhi-customer-canon {
  background: var(--qhi-surface-page);
  color: var(--qhi-text-primary);
}

.qhi-customer-canon *,
.qhi-customer-canon *::before,
.qhi-customer-canon *::after { box-sizing: border-box; }

/* Hidden controls and internal-only sections must never be exposed by route CSS. */
.qhi-customer-canon [hidden],
html[data-qhi-shell="platform"] #tab-debug {
  display: none !important;
}

html[data-qhi-shell="platform"] :where(.qhi-client-technical, .qhi-summary-internal) {
  display: none !important;
}

.qhi-customer-canon :where(button, input, select, textarea, summary, [role="button"], [role="tab"], .btn, .qhi-button) {
  min-height: 44px;
}

.qhi-customer-canon :where(.btn-primary, .qhi-button--primary, [data-qhi-primary]) {
  min-height: 48px;
}

.qhi-customer-canon :where(input, select, textarea) {
  border-radius: 12px;
  border-color: var(--qhi-border);
}

html[data-qhi-shell="platform"] :where(
  .qhi-client-wrap,
  .qhi-svc-wrap,
  .qhi-dom-wrap,
  .qhi-bill-wrap,
  .qhi-acct-wrap,
  .qhi-sec-wrap,
  .qhi-sup-wrap
) {
  width: min(var(--qhi-panel-max), calc(100% - 48px)) !important;
  margin-inline: auto !important;
}

.qhi-customer-layout {
  display: grid !important;
  grid-template-columns: minmax(220px, var(--qhi-panel-nav)) minmax(0, 1fr) !important;
  gap: var(--qhi-panel-gap) !important;
  align-items: start !important;
  overflow: visible !important;
}

html[data-qhi-shell="platform"] body.qhi-customer-canon .qhi-customer-account-layout {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.qhi-customer-account-layout > .qhi-customer-content-column {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--qhi-border);
  border-radius: var(--qhi-panel-radius-sm);
  background: var(--qhi-surface-raised);
  box-shadow: var(--qhi-panel-shadow);
  position: relative;
}

.qhi-account-section-status {
  position: sticky;
  top: 88px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--qhi-action) 34%, var(--qhi-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--qhi-action) 9%, var(--qhi-surface-raised));
  color: var(--qhi-text-primary);
  box-shadow: 0 10px 28px rgba(7, 24, 49, .10);
  font-weight: 800;
}

.qhi-account-section-status[hidden] { display: none !important; }

.qhi-account-section-status.is-error {
  border-color: color-mix(in srgb, var(--qhi-danger) 42%, var(--qhi-border));
  background: color-mix(in srgb, var(--qhi-danger) 8%, var(--qhi-surface-raised));
}

.qhi-account-section-status button {
  min-height: 40px !important;
  padding: 8px 13px;
  border: 1px solid var(--qhi-border);
  border-radius: 10px;
  background: var(--qhi-surface-raised);
  color: var(--qhi-text-primary);
  font: inherit;
  cursor: pointer;
}

body.qhi-account-section-loading .qhi-customer-account-layout > .qhi-customer-content-column {
  cursor: progress;
}

html[data-theme="dark"] .qhi-customer-content-column .qhi-svc-msg.is-ok {
  border-color: color-mix(in srgb, var(--qhi-success) 42%, transparent);
  background: color-mix(in srgb, var(--qhi-success) 12%, var(--qhi-surface-raised));
  color: var(--qhi-success);
}

html[data-theme="dark"] .qhi-customer-content-column .qhi-dom-empty {
  background: var(--dom-soft, var(--qhi-surface-muted));
  color: var(--dom-muted, var(--qhi-text-secondary));
}

.qhi-customer-layout > .qhi-customer-nav {
  grid-column: 1 !important;
  grid-row: 1 / span 100 !important;
  align-self: start !important;
  height: fit-content !important;
  position: sticky !important;
  top: 96px !important;
  z-index: 5;
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: visible !important;
  border: 1px solid var(--qhi-border) !important;
  border-radius: var(--qhi-panel-radius-sm) !important;
  background: var(--qhi-surface-raised) !important;
  box-shadow: 0 12px 34px rgba(7, 24, 49, .06) !important;
}

.qhi-customer-account-layout > .qhi-customer-nav {
  grid-row: 1 !important;
}

.qhi-customer-layout > :not(.qhi-customer-nav):not(.qhi-customer-mobile-nav) {
  grid-column: 2 !important;
  min-width: 0;
  width: 100%;
}

.qhi-customer-layout .qhi-bill-content,
.qhi-customer-layout .qhi-bill-grid,
.qhi-customer-layout .qhi-bill-card {
  min-width: 0;
  max-width: 100%;
}

.qhi-customer-nav .qhi-customer-nav__item,
.qhi-customer-nav > :where(a, button, [role="tab"]) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--qhi-border) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--qhi-surface-muted) 72%, var(--qhi-surface-raised)) !important;
  color: var(--qhi-text-secondary) !important;
  box-shadow: 0 3px 10px rgba(7, 24, 49, .035) !important;
  text-align: left !important;
  text-decoration: none !important;
  font: inherit !important;
  font-weight: 800 !important;
  white-space: normal !important;
  cursor: pointer;
}

.qhi-customer-nav[data-qhi-canon-progress="true"] .qhi-customer-nav__item {
  cursor: default;
}

.qhi-customer-service-layout > .qhi-customer-mobile-nav { display: none; }

.qhi-customer-nav :where(a, button, [role="tab"])::after { display: none !important; }

.qhi-customer-nav :where(a, button, [role="tab"]) img {
  flex: 0 0 auto;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
}

.qhi-customer-nav :where(a, button, [role="tab"]):hover {
  border-color: color-mix(in srgb, var(--qhi-action) 24%, var(--qhi-border)) !important;
  background: color-mix(in srgb, var(--qhi-action) 7%, var(--qhi-surface-raised)) !important;
  color: var(--qhi-text-primary) !important;
}

.qhi-customer-nav .qhi-customer-nav__item:is(.is-active, [aria-current="page"], [aria-selected="true"]) {
  border-color: color-mix(in srgb, var(--qhi-action) 58%, var(--qhi-border)) !important;
  background: color-mix(in srgb, var(--qhi-action) 15%, var(--qhi-surface-raised)) !important;
  color: var(--qhi-action) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--qhi-action) 13%, transparent) !important;
}

.qhi-customer-nav .qhi-customer-nav__item:is(.is-active, [aria-current="page"], [aria-selected="true"])::before {
  content: "";
  width: 4px;
  align-self: stretch;
  border-radius: 999px;
  background: var(--qhi-action);
}

.qhi-customer-mobile-nav {
  display: none;
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid var(--qhi-border);
  border-radius: var(--qhi-panel-radius-sm);
  background: var(--qhi-surface-raised);
}

.qhi-customer-mobile-nav label {
  display: block;
  margin: 0 0 7px;
  color: var(--qhi-text-secondary);
  font-size: .82rem;
  font-weight: 900;
}

.qhi-customer-mobile-nav select {
  width: 100%;
  min-height: 48px;
  padding: 10px 38px 10px 12px;
  background: var(--qhi-surface-muted);
  color: var(--qhi-text-primary);
  font-weight: 800;
}

.qhi-customer-card,
.qhi-customer-canon :where(dialog, [role="dialog"]) {
  border-color: var(--qhi-border);
  border-radius: var(--qhi-panel-radius-sm);
  background: var(--qhi-surface-raised);
  color: var(--qhi-text-primary);
}

.qhi-customer-help-label-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100%;
  min-width: 0;
}

.qhi-customer-help-label-row > label {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}

.qhi-context-help-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.qhi-customer-help,
.qhi-customer-canon .qhi-option-help {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px !important;
  height: 28px;
  min-height: 28px !important;
  margin: -4px -4px -4px -3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: help;
}

.qhi-customer-help::after,
.qhi-customer-canon .qhi-option-help::after {
  content: "?";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--qhi-action) 42%, var(--qhi-border));
  border-radius: 999px;
  background: var(--qhi-surface-raised);
  color: color-mix(in srgb, var(--qhi-action) 72%, var(--qhi-text-secondary));
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.qhi-customer-help::before,
.qhi-customer-canon .qhi-option-help::before {
  content: attr(data-qhi-tooltip);
  position: absolute;
  z-index: 120;
  top: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid var(--qhi-border);
  border-radius: 8px;
  background: var(--qhi-surface-raised);
  color: var(--qhi-text-primary);
  box-shadow: 0 12px 30px rgba(8, 24, 48, .18);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}

.qhi-customer-canon :where(.wpctl-help, .qhi-help-tip) {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: -4px -4px -4px -3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, var(--qhi-surface-raised) 0 8px, color-mix(in srgb, var(--qhi-action) 42%, var(--qhi-border)) 8.5px 9.5px, transparent 10px) !important;
  color: color-mix(in srgb, var(--qhi-action) 72%, var(--qhi-text-secondary)) !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: help !important;
}

html[data-qhi-shell="platform"] .qhi-ai-credit-header,
html[data-qhi-shell="platform"] .qhi-header-more-btn {
  min-height: 44px !important;
}

.qhi-customer-help:hover,
.qhi-customer-canon .qhi-option-help:hover { background: transparent !important; }

.qhi-customer-help:hover::after,
.qhi-customer-canon .qhi-option-help:hover::after {
  background: color-mix(in srgb, var(--qhi-action) 10%, var(--qhi-surface-raised));
}

.qhi-customer-help:hover::before,
.qhi-customer-help:focus-visible::before,
.qhi-customer-canon .qhi-option-help:hover::before,
.qhi-customer-canon .qhi-option-help:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

.qhi-customer-help-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 28px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--qhi-border);
  border-radius: 20px;
  background: var(--qhi-surface-raised);
  color: var(--qhi-text-primary);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .26);
}

.qhi-customer-help-dialog::backdrop { background: rgba(4, 12, 25, .62); }
.qhi-customer-help-dialog__body { padding: 24px; }
.qhi-customer-help-dialog h2 { margin: 0 0 10px; font-size: 1.35rem; }
.qhi-customer-help-dialog p { margin: 0; color: var(--qhi-text-secondary); line-height: 1.65; }
.qhi-customer-help-dialog__close {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  border: 0;
  border-radius: 12px;
  background: var(--qhi-action);
  color: #fff;
  font-weight: 900;
}

.qhi-customer-danger-zone {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--qhi-danger) 44%, var(--qhi-border));
  border-radius: var(--qhi-panel-radius-sm);
  background: color-mix(in srgb, var(--qhi-danger) 5%, var(--qhi-surface-raised));
}

html[data-theme="dark"] .qhi-customer-help-dialog__close { color: #07101f; }

@media (max-width: 860px) {
  html[data-qhi-shell="platform"] :where(
    .qhi-client-wrap,
    .qhi-svc-wrap,
    .qhi-dom-wrap,
    .qhi-bill-wrap,
    .qhi-acct-wrap,
    .qhi-sec-wrap,
    .qhi-sup-wrap
  ) { width: min(var(--qhi-panel-max), calc(100% - 28px)) !important; }
  .qhi-customer-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .qhi-customer-layout > .qhi-customer-nav { display: none !important; }
  .qhi-customer-layout > .qhi-customer-mobile-nav { display: block !important; grid-column: 1 !important; }
  .qhi-customer-layout > :not(.qhi-customer-nav):not(.qhi-customer-mobile-nav) { grid-column: 1 !important; }
  .qhi-customer-account-layout > .qhi-customer-content-column { grid-column: 1 !important; grid-row: auto !important; }
  .qhi-customer-layout > .qhi-customer-nav[data-qhi-canon-progress="true"] {
    position: static !important;
    display: grid !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .qhi-customer-service-layout > .qhi-customer-mobile-nav { display: block !important; }
  .qhi-customer-service-layout > .qhi-sidebar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .qhi-customer-canon *, .qhi-customer-canon *::before, .qhi-customer-canon *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}