/* ============================================================
   PULSE REDESIGN v3 — 玻璃拟态风（Glassmorphism）
   策略：覆盖 [data-theme="olive"] 令牌 + 卡片玻璃化（纯 CSS，不碰 HTML/JS/数据）
   方向：清透蓝紫渐变底 + 半透明白卡片 + backdrop-blur + 柔和阴影
   参考：用户提供的 Cirro 玻璃拟态界面截图
   ============================================================ */

/* ---------- 1. 玻璃拟态主题令牌（覆盖 olive） ---------- */
[data-theme="olive"] {
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  /* 画布：浅蓝紫渐变由 body/app 提供，surface 全透明 */
  --bg:            transparent;
  --surface-1:     rgba(255, 255, 255, 0.62);
  --surface-2:     rgba(255, 255, 255, 0.45);
  --surface-3:     rgba(255, 255, 255, 0.32);
  --border:        rgba(255, 255, 255, 0.55);
  --border-strong: rgba(255, 255, 255, 0.72);
  --text-1:        #0f172a;
  --text-2:        #334155;
  --text-3:        #64748b;

  /* 蓝紫强调色 */
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-press:  #3730a3;
  --accent-soft:   rgba(99, 102, 241, 0.12);
  --accent-line:   #6366f1;
  --on-accent:     #ffffff;

  /* 语义色：清透版 */
  --success:       #3b82f6;
  --success-soft:  rgba(59, 130, 246, 0.12);
  --warning:       #f59e0b;
  --warning-soft:  rgba(245, 158, 11, 0.12);
  --danger:        #ef4444;
  --danger-soft:   rgba(239, 68, 68, 0.12);
  --info:          #06b6d4;
  --info-soft:     rgba(6, 182, 212, 0.12);

  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-card:0 8px 32px rgba(15, 23, 42, 0.08);
  --grid-line:  rgba(255, 255, 255, 0.45);

  /* Sidebar 玻璃墨蓝 */
  --olive-900:    rgba(30, 41, 59, 0.78);
  --olive-800:    rgba(51, 65, 85, 0.72);
  --olive-700:    rgba(71, 85, 105, 0.68);
  --olive-cream:  #818cf8;
  --olive-text-light: #ffffff;
  --olive-text-dim:   rgba(255, 255, 255, 0.70);
}

/* ---------- 2. 全局渐变背景 ---------- */
html, body {
  min-height: 100%;
}
body {
  background:
    radial-gradient(circle at 10% 20%, rgba(199, 210, 254, 0.55) 0%, transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(165, 180, 252, 0.45) 0%, transparent 35%),
    linear-gradient(135deg, #e0e7ff 0%, #dbeafe 40%, #c7d2fe 100%);
  background-attachment: fixed;
}
body::before { display: none !important; }

/* ---------- 3. 玻璃拟态通用卡片基底 ---------- */
.panel, .kpi, .action-card, .morning-report,
.bldg-summary .stat, .unit, .module-card,
.rate-card, .form-card, .empty-state {
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* ---------- 4. 深色玻璃 Sidebar ---------- */
.sidebar {
  background: var(--olive-900);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  padding: 0;
}
.brand {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.brand-name { color: var(--olive-text-light); font-weight: 800; letter-spacing: -0.02em; }
.brand-sub { color: var(--olive-text-dim); }
.brand-mark {
  background: linear-gradient(150deg, #818cf8, #4f46e5);
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.nav { padding: var(--space-4) var(--space-3); gap: var(--space-1); }
.nav-label { color: rgba(255,255,255,0.55); letter-spacing: 0.16em; font-weight: 700; }
.nav-item { color: rgba(255,255,255,0.82); border-radius: var(--r-sm); }
.nav-item:hover { background: var(--olive-700); color: var(--olive-text-light); }
.nav-item.is-active {
  background: linear-gradient(90deg, rgba(129, 140, 248, 0.35), rgba(129, 140, 248, 0.08));
  color: #fff;
}
.nav-item.is-active::before { background: #818cf8; height: 22px; }
.nav-item.is-active svg { color: #c7d2fe; }
.nav-item .badge-count { background: rgba(255,255,255,0.18); color: #fff; }
.nav-item .badge-count.danger { background: var(--danger); color: #fff; }
.user {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.user .name { color: var(--olive-text-light); }
.user .role { color: var(--olive-text-dim); }
.avatar {
  background: linear-gradient(140deg, #818cf8, #4f46e5);
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.30);
}

/* ---------- 5. Topbar 玻璃 ---------- */
.topbar {
  background: rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.search {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.search input::placeholder { color: var(--text-3); }

/* ---------- 6. 按钮 ---------- */
.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.28);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
}
.btn-danger { background: var(--danger); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.btn-ghost { background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.6); color: var(--text-2); }
.btn-ghost:hover { background: rgba(255,255,255,0.65); }

/* ---------- 7. 排版 ---------- */
.content { padding: var(--space-6) clamp(20px, 4vw, 48px); }
.page-greeting {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.55);
}
.page-greeting .date { color: var(--text-3); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-xs); font-weight: 700; }
.page-greeting h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--text-1);
  line-height: 1.1;
  margin-top: 4px;
}

/* ---------- 8. 晨报玻璃卡片（纯黑字） ---------- */
.morning-report {
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-5);
}
.morning-report .mr-meta {
  color: #000;
  letter-spacing: 0.14em;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  font-weight: 700;
}
.morning-report .mr-title {
  font-weight: 800;
  font-size: var(--fs-lg);
  color: #000;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.morning-report .mr-desc {
  color: #000;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.75;
}
.morning-report .mr-desc b { color: #000; font-weight: 700; }
.morning-report .mr-tags { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.morning-report .mr-tag {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 0;
  font-size: var(--fs-sm);
  color: #000;
  font-weight: 600;
}
.morning-report .mr-right {
  text-align: right;
  border-left: 1px solid rgba(255,255,255,0.55);
  padding-left: var(--space-6);
}
.morning-report .mr-right .big {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #000;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.morning-report .mr-right .small { color: #000; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; }

/* ---------- 9. KPI 玻璃卡片 ---------- */
.kpi-clean {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.kpi-clean .kpi {
  border-radius: var(--r-md);
  padding: var(--space-5);
}
.kpi-clean .kpi .label { color: var(--text-3); font-weight: 600; }
.kpi-clean .kpi .ico { background: rgba(255,255,255,0.55); color: var(--accent); box-shadow: none; }
.kpi-clean .kpi .val {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-1);
}
.kpi-clean .kpi .unit { color: var(--text-3); }
.kpi-clean .kpi .delta { color: var(--accent); font-weight: 700; }

/* ---------- 10. Action Center 非对称 bento ---------- */
.action-center { margin-bottom: var(--space-5); }
.ac-head .ac-label { color: var(--text-3); letter-spacing: 0.14em; font-size: var(--fs-xs); font-weight: 700; }
.ac-head .ac-title { color: var(--text-1); font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.02em; }
.action-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.action-card {
  border-radius: var(--r-md);
  padding: var(--space-5);
}
.action-card .ac-eyebrow { color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; }
.action-card .ac-eyebrow .ac-count { background: rgba(255,255,255,0.55); color: var(--text-2); }
.action-card .ac-eyebrow .ac-count.danger { background: var(--danger-soft); color: var(--danger); }
.action-card .ac-title2 { color: var(--text-1); font-weight: 800; font-size: var(--fs-md); }
.action-card .ac-list { color: var(--text-2); }
.action-card .ac-empty { color: var(--text-3); }

/* ---------- 11. Panel / Chart / Table 玻璃 ---------- */
.panel {
  border-radius: var(--r-lg);
  padding: var(--space-5);
}
.panel-head { border-bottom: 1px solid rgba(255,255,255,0.55); padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
.panel-head h3 { color: var(--text-1); font-weight: 800; letter-spacing: -0.02em; }
.panel-head .sub { color: var(--text-3); }
.panel-head .legend span { color: var(--text-2); }

.table th { color: var(--text-3); font-weight: 700; }
.table td { color: var(--text-2); border-bottom: 1px solid rgba(255,255,255,0.4); }
.table tbody tr:hover { background: rgba(255,255,255,0.35); }

.chart-area line { stroke: rgba(255,255,255,0.5); }
.donut .center .big { color: var(--text-1); }
.donut .center .small { color: var(--text-3); }
.donut-legend .nm { color: var(--text-2); }
.donut-legend .pc { color: var(--text-1); font-weight: 700; }

/* ---------- 12. 楼层图卡片玻璃化 ---------- */
.bldg-summary .stat {
  border-radius: var(--r-md);
  padding: var(--space-4);
}
.bldg-summary .stat .big { color: var(--text-1); font-weight: 800; }
.bldg-summary .stat .small { color: var(--text-3); }
.floor-row { border-bottom: 1px solid rgba(255,255,255,0.4); }
.floor-label { color: var(--text-3); font-weight: 700; }
.unit {
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-2);
}
.unit .u-no { color: var(--text-1); font-weight: 800; }
.unit .u-rent { color: var(--text-2); }
.unit .u-st { color: var(--text-3); font-weight: 600; }
.unit.rented { border-top: 3px solid var(--success); }
.unit.vacant { border-top: 3px solid var(--warning); }
.unit.shop { border-left: 3px solid var(--info); }
.unit:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,23,42,0.12); background: rgba(255,255,255,0.75); }

/* ---------- 13. Tag / State pills ---------- */
.tag, .tag-success, .tag-warning, .tag-danger, .tag-info {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.65);
  color: var(--text-2);
  font-weight: 600;
}
.tag-success { color: #1d4ed8; background: rgba(59,130,246,0.14); }
.tag-warning { color: #b45309; background: rgba(245,158,11,0.14); }
.tag-danger  { color: #b91c1c; background: rgba(239,68,68,0.14); }
.tag-info    { color: #0e7490; background: rgba(6,182,212,0.14); }

/* ---------- 14. 表单 / 输入框 ---------- */
input, select, textarea {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  color: var(--text-1);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

/* ---------- 15. 响应式 ---------- */
@media (max-width: 1100px) {
  .kpi-clean { grid-template-columns: repeat(2, 1fr); }
  .action-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-2b { grid-template-columns: 1fr; }
  .morning-report { grid-template-columns: 1fr; }
  .morning-report .mr-right { text-align: left; border-left: none; border-top: 1px solid rgba(255,255,255,0.55); padding-left: 0; padding-top: var(--space-4); }
}
@media (max-width: 640px) {
  .kpi-clean { grid-template-columns: 1fr; }
}

/* ---------- 16. 登录页卡片垂直居中 ---------- */
body:has(> .auth-card) {
  display: grid !important;
  place-items: center !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
.auth-card {
  align-self: center !important;
  justify-self: center !important;
  margin: auto !important;
}