/*
 * WHMCS 品牌一致性补丁（P3-3）—— 与 portal-web 同源主题。
 *
 * 目标：让 WHMCS 账单页与门户视觉一致、弱化营销入口，不重写整套主题。
 * 应用方式见 docs/门户_P3_WHMCS入口弱化指南.md，统一主题评估见
 * docs/WHMCS主题统一_评估与方案.md。
 *
 * 单一品牌色，无渐变、无玻璃拟态；配色/圆角/焦点与 portal-web 浅色 token 对齐。
 * 本文件由 hook 注入到所有 WHMCS 客户区页面，:root 下的 --st-* 是整个
 * WHMCS 侧的唯一品牌真源；FreeRADIUS 模块的 clientarea.css 也引用它们。
 */

:root {
  /* 品牌主色（藏青）：对齐 portal-web 浅色 --primary hsl(222 39% 27%) ≈ #2a3a60 */
  --st-brand: #2a3a60;
  --st-brand-hover: #212d4a;
  --st-brand-soft: #eef1f7;
  --st-brand-ring: rgba(42, 58, 96, 0.16);

  /* 中性体系：对齐 portal-web 浅色 token */
  --st-fg: #1f2733;
  --st-muted: #5f6b7a;
  --st-border: #d8dee7;
  --st-border-soft: #e8edf3;
  --st-bg: #f6f8fb;
  --st-surface: #ffffff;
  --st-surface-soft: #fbfcfe;

  /* 统一圆角，对齐 portal-web --radius 0.625rem */
  --st-radius: 10px;

  /* 兼容旧变量名（保留引用不破坏） */
  --portal-primary: var(--st-brand);
  --portal-primary-hover: var(--st-brand-hover);
  --portal-fg: var(--st-fg);
  --portal-muted: var(--st-muted);
  --portal-border: var(--st-border);
  --portal-border-soft: var(--st-border-soft);
  --portal-bg: var(--st-bg);
  --portal-surface: var(--st-surface);
}

body {
  background: var(--st-bg) !important;
  color: var(--st-fg);
}

/* 顶部主操作按钮统一品牌色 */
.btn-primary,
.primary-btn {
  background-color: var(--st-brand) !important;
  border-color: var(--st-brand) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.primary-btn:hover,
.primary-btn:focus {
  background-color: var(--st-brand-hover) !important;
  border-color: var(--st-brand-hover) !important;
}

/* 键盘焦点：与门户一致的品牌色焦点环 */
.btn-primary:focus-visible,
.primary-btn:focus-visible,
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--st-brand);
  outline-offset: 2px;
}

/* 弱化营销区块：首页大横幅 / 产品促销卡（账单系统不做宣传） */
#homeIntro,
.home-banner,
.carousel,
.marketing-promo,
.domain-search,
.homepage-domain-search,
section#home-banner {
  display: none !important;
}

/* 客户区回门户入口由 includes/hooks/sslturbo_portal_brand.php 注入 */
.sslturbo-portal-bridge {
  background: var(--st-brand-soft);
  border-bottom: 1px solid var(--st-border);
  color: var(--st-fg);
  font-size: 14px;
}

.sslturbo-portal-bridge__link {
  display: block;
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
  padding: 10px 0;
  color: var(--st-brand);
  font-weight: 600;
  text-decoration: none;
}

.sslturbo-portal-bridge__link:hover,
.sslturbo-portal-bridge__link:focus {
  color: var(--st-brand-hover);
  text-decoration: underline;
}

/* WHMCS OAuth authorize/login uses a standalone template that does not run
   ClientAreaHeadOutput. nginx injects this stylesheet and bridge for that exact page. */
body > section#header {
  display: none;
}

body > section#content {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 96px);
  padding: 44px 16px;
}

body > section#content .content-container {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  box-shadow: none;
  color: var(--st-fg);
  margin: 0 auto;
  max-width: 620px;
  overflow: hidden;
  width: 100%;
}

body > section#content h2 {
  color: var(--st-fg);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.28;
  margin: 0;
  padding: 30px 32px 10px;
}

body > section#content .content-padded {
  padding: 18px 32px 28px;
}

body > section#content .form-group label,
body > section#content .form-check {
  color: var(--st-fg);
}

body > section#content .action-buttons {
  align-items: center;
  background: var(--st-surface-soft);
  border-top: 1px solid var(--st-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 32px;
}

body > section#content .action-buttons .float-left {
  margin-right: auto;
}

body > section#content .btn-default {
  background: var(--st-surface);
  border-color: var(--st-border);
  color: var(--st-fg);
}

body > section#footer {
  color: var(--st-muted);
  font-size: 13px;
  padding: 0 16px 28px;
  text-align: center;
}

.header,
.header .topbar,
.header .navbar,
.main-navbar-wrapper {
  background: var(--st-surface) !important;
}

.header,
.main-navbar-wrapper,
.master-breadcrumb {
  border-bottom: 1px solid var(--st-border-soft);
}

.navbar-brand,
.navbar-light .navbar-brand {
  color: var(--st-fg) !important;
  font-weight: 700;
}

#Primary_Navbar-Home,
#Primary_Navbar-Announcements,
#Primary_Navbar-Knowledgebase,
#Primary_Navbar-Network_Status,
#Primary_Navbar-Contact_Us,
.header form[action*="knowledgebase"] {
  display: none !important;
}

.navbar-nav .nav-link,
.navbar-nav .dropdown-item,
.breadcrumb,
.breadcrumb a {
  color: var(--st-muted) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus,
.breadcrumb a:hover {
  color: var(--st-brand) !important;
}

/* 收敛卡片阴影与圆角，去掉装饰性渐变 */
.card,
.panel,
.sidebar .panel,
.list-group-item {
  border: 1px solid var(--st-border) !important;
  box-shadow: none !important;
  background-image: none !important;
  border-radius: var(--st-radius) !important;
}

.card-header,
.panel-heading {
  background: var(--st-surface-soft) !important;
  border-bottom: 1px solid var(--st-border-soft) !important;
  color: var(--st-fg) !important;
}

.form-control,
.input-group-text {
  border-color: var(--st-border) !important;
}

.form-control:focus {
  border-color: var(--st-brand) !important;
  box-shadow: 0 0 0 3px var(--st-brand-ring) !important;
}

.alert {
  border-radius: var(--st-radius) !important;
}