/* ===== 基础样式 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ============================================================
     P1 设计令牌系统（来源：设计方案-全新UI §02）
     原语层：品牌色 / Slate 灰阶 / 语义色 / 间距 / 圆角 / 阴影 / 字阶 / 动效
     ============================================================ */

  /* —— 品牌色（商务蓝） —— */
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;

  /* —— 中性灰阶（Slate） —— */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* —— 语义色 —— */
  --success: #22c55e;
  --success-strong: #16a34a;
  --warning: #f59e0b;
  --warning-strong: #d97706;
  --danger: #ef4444;
  --danger-strong: #dc2626;
  --danger-rgb: 239, 68, 68;
  --info: #3b82f6;

  /* —— 间距（4px 基数） —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* —— 圆角 —— */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* —— 阴影（三级） —— */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.12);

  /* —— 字阶 —— */
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;

  /* —— 动效 —— */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     旧变量别名桥接层
     themes.css 的 12 套主题按 data-theme 覆盖同名变量，
     此处默认值收敛为新令牌，保证渐进兼容、不破坏现有主题
     ============================================================ */
  --primary: var(--brand-600);
  --primary-dark: var(--brand-700);
  --primary-rgb: 37, 99, 235; /* rgb 分量，供 rgba(var(--primary-rgb), a) 使用 */
  --secondary: var(--brand-800);
  --accent: #60a5fa;
  --bg-main: var(--gray-100);
  --bg-sidebar: var(--gray-900);
  --bg-card: #ffffff;
  --bg-input: var(--gray-50);
  --text-main: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-light: var(--gray-400);
  --text-sidebar: var(--gray-400);
  --text-sidebar-active: #ffffff;
  --border-color: var(--gray-200);
  --shadow: var(--shadow-md);
  --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.12);
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
  --gradient-hover: linear-gradient(135deg, var(--primary-dark), var(--secondary));
  --sidebar-active-bg: rgba(255,255,255,0.1);
  --transition: all 0.3s ease;
  --sidebar-width: 240px;
  --header-height: 60px;
  /* ===== 仪表盘动态配色（可自定义调色覆盖） ===== */
  --sc1-a: #667eea; --sc1-b: #764ba2;
  --sc2-a: #f093fb; --sc2-b: #f5576c;
  --sc3-a: #4facfe; --sc3-b: #00f2fe;
  --sc4-a: #43e97b; --sc4-b: #38f9d7;
  --dash-chart-accent: #667eea;
  --dash-gantt-accent: #4facfe;
  --dash-today-accent: #43e97b;
  --dash-particle: 102,126,234; /* rgb 分量，供 rgba() 使用 */
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 3px; }

/* ===== 登录页（设计方案 §05：左品牌区 + 右表单双栏布局） ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
}

.login-bg-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  z-index: 0;
}

.login-bg-animation .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  animation: blobMove 20s infinite ease-in-out;
}
.login-bg-animation .blob:nth-child(1) { width: 400px; height: 400px; background: var(--accent); top: -100px; left: -100px; animation-delay: 0s; }
.login-bg-animation .blob:nth-child(2) { width: 300px; height: 300px; background: var(--primary); bottom: -80px; right: -80px; animation-delay: -5s; }
.login-bg-animation .blob:nth-child(3) { width: 350px; height: 350px; background: var(--secondary); top: 30%; right: 10%; animation-delay: -10s; }

@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 30px) scale(0.9); }
}

/* 双栏容器 */
.login-split {
  position: relative;
  z-index: 1;
  display: flex;
  width: 900px;
  max-width: 100%;
  min-height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: cardSlideIn 0.6s var(--ease);
}

/* 左侧品牌区：固定深蓝渐变，作为品牌视觉锚点 */
.login-brand {
  flex: 0 0 42%;
  background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
  color: #fff;
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.login-brand::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.18);
  filter: blur(50px);
  bottom: -80px;
  right: -80px;
}

.brand-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: var(--space-6);
}

.login-brand h2 {
  font-size: var(--font-2xl);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-2);
}

.login-brand .brand-en {
  font-size: var(--font-xs);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

.brand-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.brand-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-base);
  color: rgba(255,255,255,0.82);
}

.brand-features li .fi {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.brand-footer {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--font-xs);
  color: rgba(255,255,255,0.4);
}

/* 右侧表单区：跟随主题变量 */
.login-card {
  flex: 1;
  background: var(--bg-card);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card h1 {
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-1);
  color: var(--text-main);
}

.login-card .subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-size: var(--font-sm);
}

.login-card .input-group {
  margin-bottom: 20px;
}

.login-card label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}

.login-card .input-wrap {
  position: relative;
}

.login-card .pwd-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: var(--transition);
}

.login-card .pwd-toggle:hover { opacity: 1; background: rgba(0,0,0,0.06); }

.login-card .login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -6px 0 12px;
}

.login-card .login-tip {
  font-size: 12px;
  color: var(--text-light);
  margin: -6px 0 14px;
  line-height: 1.5;
}

.login-card .remember {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.login-card .remember input {
  width: auto;
  accent-color: var(--primary);
  cursor: pointer;
}

.login-card .input-wrap .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: 0.5;
}

.login-card input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text-main);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  outline: none;
}

.login-card input::placeholder {
  color: var(--text-light);
}

.login-card input:hover:not(:focus) {
  border-color: var(--gray-300);
}

.login-card input:focus {
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.login-card .btn-login {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: var(--font-md);
  font-weight: 600;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  margin-top: var(--space-2);
  box-shadow: var(--shadow-sm);
}

.login-card .btn-login:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.login-card .btn-login:active {
  transform: translateY(0);
}

.login-error {
  color: var(--danger);
  font-size: 13px;
  text-align: center;
  margin-bottom: 16px;
  display: none;
}

.login-hint {
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  margin-top: 20px;
}

/* 登录页移动端：折叠为单栏，隐藏品牌区 */
@media (max-width: 860px) {
  .login-split { min-height: auto; flex-direction: column; width: 420px; }
  .login-brand { display: none; }
  .login-card { padding: 40px 32px; }
}

/* ===== 主应用布局 ===== */
.app-layout {
  display: flex;
  min-height: 100vh;
  overflow-x: auto; /* 浏览器窗口变窄时，主区出现横向滚动条（侧边栏 position:fixed 不被卷走） */
  overflow-y: hidden;
}

/* 侧边栏 */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: var(--transition);
  overflow-y: auto;
}

.sidebar-header {
  padding: 20px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-header .logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-sidebar-active);
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sidebar-header .logo-sub {
  font-size: 11px;
  color: var(--text-sidebar);
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-sidebar);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.nav-item:hover {
  background: var(--sidebar-active-bg);
  color: var(--text-sidebar-active);
}

.nav-item.active {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.nav-item .nav-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
}

.nav-submenu {
  display: none;
  margin-left: 20px;
  margin-bottom: 4px;
}

.nav-submenu.show {
  display: block;
  animation: fadeInDown 0.3s ease;
}

.nav-sub-item {
  display: block;
  padding: 8px 16px 8px 40px;
  font-size: 13px;
  color: var(--text-sidebar);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.nav-sub-item:hover {
  background: var(--sidebar-active-bg);
  color: #fff;
}

.nav-sub-item.active {
  color: var(--accent);
  font-weight: 600;
}

.nav-arrow {
  margin-left: auto;
  transition: transform 0.3s;
  font-size: 12px;
}

.nav-arrow.rotate {
  transform: rotate(90deg);
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-footer .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.sidebar-footer .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* 主内容区 */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 1160px; /* 表格列宽舒展不被挤压的最低宽度（含电话 11 位数字不换行）；窗口比 (1160+220)≈1380px 窄时 .app-layout 出现横向滚动条 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* ===== 平板 / 手机适配（≤1200px）=====
   桌面端：整个主区横向滚动（保证表格列不被挤压），侧边栏 position:fixed 不被卷走。
   平板/手机：改为「页面不横滚 + 表格容器自己横向滚动」，
   否则 iPhone(393px) / iPad 竖屏(820px) 会把顶栏、侧边栏一并卷出屏幕，无法操作。 */
@media (max-width: 1200px) {
  .app-layout {
    overflow-x: hidden;
  }
  .main-content {
    min-width: 0;
    flex-shrink: 1;
  }
  /* 表格保持最小宽度不挤压，由下面这些容器接管横向滚动 */
  .table-wrap,
  .booking-table-wrap,
  #usersTableWrap,
  .card:has(> .table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap > .table,
  .booking-table-wrap > .table,
  #usersTableWrap > .table,
  .card:has(> .table) > .table {
    min-width: 1160px;
  }
  /* 卡片内表格：避免卡片圆角裁切滚动条 */
  .card:has(> .table) {
    padding-bottom: 2px;
  }
}

/* ===== 1025–1200px：iPad 横屏(1180) 专用 =====
   此宽度下侧边栏默认常驻，但可通过汉堡按钮手动收起，
   收起后主区有 1180px 全宽，刚好放得下 1160px 的预定表（免横向滚动）。 */
@media (min-width: 1025px) and (max-width: 1200px) {
  .topbar-menu-btn { display: inline-flex; }
  .sidebar {
    transition: transform 0.3s ease;
  }
  .sidebar.collapsed {
    transform: translateX(-100%);
    box-shadow: none;
  }
  /* 相邻兄弟选择器：侧边栏收起时主区补满全宽 */
  .sidebar.collapsed + .main-content {
    margin-left: 0;
  }
}

.topbar {
  height: var(--header-height);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar .page-title {
  font-size: 18px;
  font-weight: 600;
  margin-left: 28px;          /* 距离侧边栏 ≈ 2 个汉字字符（24+28=52px） */
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-main);
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.topbar-menu-btn:hover { background: var(--gray-200); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-selector select {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.btn-logout {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.1);
  color: var(--danger);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.btn-logout:hover { background: var(--danger); color: #fff; }

.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* ===== iPhone 安全区（配合 viewport-fit=cover）=====
   避开灵动岛/刘海与底部小横条。⚠️ 必须放在 .content-area 定义之后：
   同特异性下后写的规则才生效，写前面会被上面的 padding:24px 覆盖掉。 */
@supports (padding: env(safe-area-inset-bottom)) {
  .topbar {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .content-area {
    padding-left: calc(24px + max(0px, env(safe-area-inset-left)));
    padding-right: calc(24px + max(0px, env(safe-area-inset-right)));
    padding-bottom: calc(24px + max(0px, env(safe-area-inset-bottom)));
  }
  .modal-footer {
    padding-bottom: calc(12px + max(0px, env(safe-area-inset-bottom)));
  }
  .sidebar {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* ===== 通用组件 ===== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.card-title {
  font-size: var(--font-md);
  font-weight: 600;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ===== 按钮系统（设计方案 §04：主/次/危险/幽灵 4 变体） ===== */
.btn {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.4;
  transition: all var(--duration-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  user-select: none;
  white-space: nowrap;
  min-height: 32px;
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 主按钮：实心品牌色 */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* 次按钮：白底描边 */
.btn-secondary {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

/* 危险按钮：淡红底红字，悬浮实心红 */
.btn-danger {
  background: rgba(var(--danger-rgb), 0.1);
  border-color: rgba(var(--danger-rgb), 0.2);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* 幽灵按钮：纯文字无底色 */
.btn-ghost {
  background: transparent;
  color: var(--primary);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.08);
}

.btn-sm { padding: 5px 12px; font-size: var(--font-xs); }
.btn-lg { padding: 13px 28px; font-size: var(--font-md); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }

/* 表单 */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group label .required {
  color: var(--danger);
}

/* ===== 输入框状态系统（default / hover / focus / disabled / error） ===== */
.form-control {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
  min-height: 32px;
  line-height: 1.4;
}

.form-control::placeholder {
  color: var(--text-light);
}

.form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--gray-300);
}

.form-control:focus {
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.form-control:disabled {
  background: var(--gray-100);
  color: var(--text-light);
  cursor: not-allowed;
}

/* 错误状态：加 .is-error 类 */
.form-control.is-error,
.form-control.is-error:hover:not(:disabled) {
  border-color: var(--danger);
}

.form-control.is-error:focus {
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.12);
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row .form-group {
  flex: 1;
}

select.form-control {
  cursor: pointer;
  appearance: auto;
}

/* 统一 input 与 select 的高度，避免下拉框比文本框短一截 */
input.form-control,
select.form-control {
  height: 32px;
  box-sizing: border-box;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 日期三段下拉（年/月/日） */
.date-select-row {
  display: flex;
  gap: 8px;
}
.date-select-row .date-sel {
  flex: 1;
  min-width: 0;
}

/* ===== 表格（窄屏策略：表格保持完整列宽不挤压，浏览器边框变窄时由 .app-layout 整体出现横向滚动条） ===== */
/* 表格设 min-width: 1160px（容纳 12 列预定表的"舒适列宽"，参考用户期望图 2）；
   父级 .main-content 也设 min-width: 1160px 配合，确保浏览器窗口缩到比 1160+220=1380px 窄时
   整个右侧主区出现横向滚动条（侧边栏 position:fixed 不被卷走） */

.table {
  width: 100%;
  min-width: 1160px; /* 表格最低舒适宽度（与 .main-content 联动），低于此值会换行/挤压列 */
  border-collapse: collapse;
}

/* 仪表盘「今日预定明细」：8 列卡片表格，不需要 booking 列表那种 1160px 最低舒适宽度，
   否则窄窗口下左侧 6 列会被横滚遮住（如用户截图红框位置）。
   给一个相对小一些的最小宽度 + 容器自己横滚。 */
.dash-card-today .table { min-width: 760px; }
#todayList {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 联系人/电话列单独加宽，确保 11 位电话号码单行不换行 */
.table th:nth-child(6),
.table td:nth-child(6) {
  min-width: 130px;
}

.table th {
  text-align: left;
  padding: 8px 12px;             /* 原 var(--space-3) var(--space-4) = 12px 16px，高度缩约 1/4 */
  background: var(--gray-50);
  font-size: 12px;               /* 原 var(--font-sm) = 13px */
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gray-600);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.table td {
  padding: 8px 12px;             /* 与 th 同步 */
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;               /* 原 13px */
  vertical-align: middle;
  white-space: nowrap; /* 防止单元格内文字换行（如「914会议室」不被拆成「914会/议室」） */
}

/* 表格斑马纹：奇数行用淡淡主题色（随当前风格变化），偶数行白色 */
.table tbody tr:nth-child(odd) {
  background: rgba(var(--primary-rgb), 0.12);
}
.table tbody tr:nth-child(even) {
  background: transparent;
}

.table tbody tr:hover {
  background: rgba(var(--primary-rgb), 0.2);
}
.table tbody tr:nth-child(even):hover {
  background: rgba(var(--primary-rgb), 0.2);
}

.table .status-badge {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

/* ===== 徽章「色点 + 文字」双编码（WCAG 友好，色弱可辨） ===== */
.badge-success::before,
.badge-warning::before,
.badge-danger::before,
.badge-info::before,
.badge-primary::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  flex-shrink: 0;
}

.badge-success { background: rgba(34,197,94,0.15); color: var(--success-strong); }
.badge-warning { background: rgba(251,191,36,0.15); color: var(--warning-strong); }
.badge-danger { background: rgba(var(--danger-rgb),0.15); color: var(--danger-strong); }
.badge-info { background: rgba(59,130,246,0.15); color: var(--brand-600); }
.badge-primary { background: rgba(var(--primary-rgb), 0.15); color: var(--primary-dark); }

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 600px;
  max-width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  animation: modalIn 0.3s ease;
}

.modal.modal-lg { width: 800px; }
.modal.modal-sm { width: 400px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 50%;
  transition: var(--transition);
}

.modal-close:hover { background: var(--bg-input); }

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
}

/* 空状态（设计方案 §04：图标 + 主文案，弱化视觉噪音） */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
}

.empty-state .icon {
  font-size: 40px;
  margin-bottom: var(--space-4);
  opacity: 0.85;
}

.empty-state .text {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Toast 通知 */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  animation: toastIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
}

.toast-success { background: var(--success-strong); color: #fff; }
.toast-error { background: var(--danger-strong); color: #fff; }
.toast-info { background: var(--brand-600); color: #fff; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== 仪表盘专用 ===== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;                    /* 原 20px */
  margin-bottom: 16px;          /* 原 24px */
}

.stat-card {
  background: var(--gradient);
  border-radius: var(--radius);
  padding: 12px 14px;           /* 原 16px 18px，再压缩 1/4 */
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-3px);  /* 原 -4px */
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

.stat-card .stat-icon {
  position: absolute;
  right: 10px;                  /* 原 12px */
  top: 8px;                     /* 原 10px */
  font-size: 20px;              /* 原 26px，再压缩 1/4 */
  opacity: 0.25;
}

.stat-card .stat-value {
  font-size: 22px;              /* 原 28px，再压缩 1/4（接近 21px） */
  font-weight: 700;
  margin-top: 3px;              /* 原 4px */
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 11px;              /* 原 13px，再压缩 1/4（接近 10px） */
  opacity: 0.9;
}

.stat-card .stat-value {
  margin-bottom: 1px;           /* 原 2px */
}

.stat-card .stat-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;                  /* 原 3px */
  background: rgba(255,255,255,0.3);
  overflow: hidden;
}

.stat-card .stat-bar::after {
  content: '';
  display: block;
  height: 100%;
  background: rgba(255,255,255,0.6);
  animation: barFill 2s ease;
}

@keyframes barFill {
  from { width: 0; }
  to { width: 100%; }
}

.stat-card:nth-child(1) { background: linear-gradient(135deg, var(--sc1-a), var(--sc1-b)); }
.stat-card:nth-child(2) { background: linear-gradient(135deg, var(--sc2-a), var(--sc2-b)); }
.stat-card:nth-child(3) { background: linear-gradient(135deg, var(--sc3-a), var(--sc3-b)); }
.stat-card:nth-child(4) { background: linear-gradient(135deg, var(--sc4-a), var(--sc4-b)); }

.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

/* 分区专属配色：柱状图卡片顶部渐变色条 */
.chart-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dash-chart-accent), var(--sc1-b));
  border-radius: var(--radius) var(--radius) 0 0;
}

.chart-card .chart-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-main);
}

/* 分区卡片标题专属彩色标识点 */
.chart-card .chart-title::before,
.dash-card .card-title::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: 1px;
}
.chart-card .chart-title::before { background: linear-gradient(135deg, var(--dash-chart-accent), var(--sc1-b)); }
.dash-card-gantt .card-title::before { background: linear-gradient(135deg, var(--dash-gantt-accent), #00f2fe); }
.dash-card-today .card-title::before { background: linear-gradient(135deg, var(--dash-today-accent), #38f9d7); }

.chart-card canvas {
  max-height: 255px;
}

/* ===== 仪表盘 3D 悬浮 ===== */
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}
.tilt:hover {
  box-shadow: var(--shadow-lg);
}

/* ===== 仪表盘粒子背景 ===== */
.dash-wrap {
  position: relative;
}
.dash-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.dash-wrap > *:not(.dash-particles) {
  position: relative;
  z-index: 1;
}
.dash-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.dash-range select {
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
}

#dashCustomRange {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#dashCustomRange input[type="date"] {
  font-size: 12px;
  height: 30px;
}

/* ===== 仪表盘自定义调色面板 ===== */
.palette-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.palette-panel {
  width: 460px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px 22px;
  color: var(--text-main);
}
.palette-panel h3 {
  font-size: 16px;
  margin-bottom: 4px;
}
.palette-tip {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 14px;
}
.palette-sec {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 12px 0 6px;
  letter-spacing: 0.5px;
}
.palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.palette-item .palette-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette-item input[type="color"] {
  width: 36px;
  height: 26px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0;
  background: none;
  cursor: pointer;
}
.palette-range-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}
.palette-range-row label { min-width: 56px; }
.palette-range-row input[type="range"] {
  flex: 1;
  accent-color: var(--primary);
}
.palette-range-row output {
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.palette-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 甘特图 ===== */
.gantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: 8px;
}

.gantt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.gantt-legend-item i {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.gantt {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.gantt-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-color);
}

.gantt-row:last-child {
  border-bottom: none;
}

.gantt-row.gantt-head {
  background: var(--bg-input);
  position: sticky;
  top: 0;
}

.gantt-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 10px;
  border-right: 1px solid var(--border-color);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gantt-label .gantt-floor {
  font-size: 11px;
  color: var(--text-light);
}

.gantt-label strong {
  font-size: 13px;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-track {
  flex: 1;
  position: relative;
  display: flex;
  min-width: 700px;
}

.gantt-days {
  display: flex;
  width: 100%;
}

.gantt-day {
  text-align: center;
  font-size: 11px;
  padding: 4px 0 3px;
  color: var(--text-secondary);
  border-right: 1px dashed var(--border-color);
  line-height: 1.3;
}

.gantt-day:last-child {
  border-right: none;
}

.gantt-day small {
  display: block;
  font-size: 10px;
  color: var(--text-light);
}

.gantt-day.today {
  color: var(--primary);
  font-weight: 700;
}

.gantt-day.today small {
  color: var(--primary);
}

.gantt-day.weekend,
.gantt-cell.weekend {
  background: rgba(150, 150, 160, 0.10);
}

.gantt-cell {
  align-self: stretch;
  min-height: 40px;
  border-right: 1px dashed var(--border-color);
}

.gantt-cell:last-child {
  border-right: none;
}

.gantt-cell.today {
  background: rgba(102, 126, 234, 0.10);
}

.gantt-cell.today.weekend {
  background: rgba(102, 126, 234, 0.10);
}

.gantt-bar {
  position: absolute;
  top: 50%;
  margin-top: -14px; /* height 28px 的一半：垂直居中于行内 */
  height: 28px;
  border-radius: 4px;
  opacity: 0.85;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, opacity 0.15s ease;
  min-width: 3px;
}

.gantt-bar:hover {
  opacity: 1;
  transform: scaleY(1.18);
  z-index: 10;
}

/* ===== 会议室管理 ===== */
.room-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
}

.floor-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.floor-item {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.floor-item:hover {
  transform: translateX(4px);
}

.floor-item.active {
  background: var(--gradient);
  color: #fff;
}

.floor-item .floor-count {
  background: rgba(255,255,255,0.3);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.floor-item:not(.active) .floor-count {
  background: var(--bg-input);
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.room-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.room-card.dragging {
  opacity: 0.5;
  border: 2px dashed var(--primary);
}

.drag-handle {
  cursor: grab;
  color: var(--text-light);
  font-size: 16px;
  line-height: 1;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.room-card-actions-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.move-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-light);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: var(--transition);
}

.move-btn:hover:not(:disabled) {
  color: var(--primary);
  border-color: var(--primary);
}

.move-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.room-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient);
}

.room-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.room-card .room-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.room-card .room-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  min-height: 40px;
}

.room-card .room-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.room-card .room-actions {
  display: flex;
  gap: 8px;
}

.room-card .room-capacity {
  font-size: 12px;
  color: var(--text-light);
}

/* ===== 预定管理 ===== */
.booking-list {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.booking-table-wrap {
  max-height: 72vh;       /* 表体可纵向滚动（表头 sticky 保留） */
  overflow-y: auto;
  /* 不设 overflow-x：横向溢出由父级 .app-layout 统一处理，避免双层滚动条 */
}

.booking-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 日历选择 */
.date-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* 茶水输入 */
.tea-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tea-row input[type="number"] {
  width: 100px;
}

/* 多选跟会人 */

/* ===== 自定义下拉（弹窗内原生 select 增强）：悬停放大动画 + 音效配套 ===== */
.fs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 8px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fs-trigger:hover {
  border-color: var(--primary);
}
.fs-trigger::after {
  content: '▾';
  color: var(--text-light);
  font-size: 12px;
  flex-shrink: 0;
}
.fs-list {
  display: none;
  position: fixed;
  z-index: 4000;
  min-width: 180px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
.fs-option {
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-main);
  transform-origin: left center;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, font-weight 0.12s ease;
}
.fs-option:hover {
  background: rgba(var(--primary-rgb), 0.12);
  transform: scale(1.1);
  font-weight: 600;
  color: var(--primary);
}
.fs-option.fs-selected {
  color: var(--primary);
}
.fs-option.fs-selected::before {
  content: '✓ ';
  font-size: 12px;
}

/* combobox（联系人/会议主题）选项同样放大 */
.combo-item {
  transform-origin: left center;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, font-weight 0.12s ease;
}
.combo-item:hover {
  transform: scale(1.1);
  font-weight: 600;
  color: var(--primary);
}

/* 导出预览 - 缩放工具栏 */
.zoom-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0.5px solid var(--border-color);
  border-radius: 6px;
  padding: 2px 6px;
  background: var(--bg-card, #fff);
}
.zoom-toolbar button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-main);
  transition: background var(--duration-fast, 0.15s) ease;
}
.zoom-toolbar button:hover {
  background: rgba(0, 0, 0, 0.08);
}
.zoom-toolbar #zoomLabel {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: center;
  color: var(--text-secondary);
  padding: 0 4px;
}

/* 导出预览 - 红色标记（持久化样式，配合 localStorage 恢复） */
#previewContent .red-mark {
  background-color: #ff5c5c;
  color: #000;
  padding: 0 2px;
  border-radius: 2px;
  white-space: nowrap;   /* 标记整体不拆行：跨行 inline span 截图渲染时背景易错乱 */
}

/* 跟会人 / 会议要求：下拉 + 添加按钮 + 已选显示框 同排布局 */
.tag-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tag-add-row .form-control {
  width: auto;
  min-width: 150px;
  flex: 0 0 auto;
}
/* 自定义下拉 trigger 在 tag-add-row 内不占满整行（下拉+按钮+chips 同一行） */
.tag-add-row .fs-trigger {
  width: auto;
  min-width: 150px;
  flex: 0 1 auto;
}

/* 弹窗内输入类控件高度统一为 38px，与自定义下拉(fs-trigger)一致。
   只匹配 .modal 内的 input/select，textarea（备注）不在此列；
   触屏端(≤1024px)由下方媒体查询的 min-height:44px 接管 */
.modal input.form-control,
.modal select.form-control {
  height: 38px;
  min-height: 38px;
}
.modal .tag-add-row .btn {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

/* 已选显示框：跟在添加按钮后面，占据剩余宽度 */
.tag-add-row .follower-tags {
  flex: 1 1 220px;
  margin-top: 0;
  min-height: 38px;
  align-items: center;
  align-content: center;
}

.tag-placeholder {
  color: var(--text-light);
  font-size: 12px;
  padding: 2px 4px;
}

/* 自定义 combobox：联系人 / 会议主题，可展开全部选项 */
.combo-wrapper {
  position: relative;
}

.combo-wrapper .combo-input {
  padding-right: 28px; /* 给箭头留位 */
}

.combo-wrapper .combo-arrow {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;              /* 贴近原生 select 箭头大小 */
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease);
}

.combo-wrapper .combo-arrow:hover {
  color: var(--primary);
}

.combo-wrapper.open .combo-arrow {
  color: var(--primary);
  transform: rotate(180deg);
}

.combo-wrapper .combo-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 420px;     /* 内容太多才滚动 */
  overflow-y: auto;
  z-index: 1000;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  font-family: inherit;
  font-size: var(--font-sm);
  padding: 2px 0;        /* 上下留一点呼吸，贴近原生 select */
}

.combo-wrapper.open .combo-dropdown {
  display: block;
}

.combo-item {
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;          /* 与 select 同字体栈 */
  font-size: var(--font-sm);     /* 13px，与 .form-control 一致 */
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--duration-fast) var(--ease);
}

.combo-item:hover {
  background: var(--bg-input);
  color: var(--primary);
}

.combo-item.selected {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-weight: 500;
}

.combo-empty {
  padding: 6px 10px;
  color: var(--text-light);
  font-family: inherit;
  font-size: var(--font-sm);
  line-height: 1.35;
  text-align: center;
}

.follower-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 32px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  min-height: 44px;
  background: var(--bg-input);
}

.follower-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--gradient);
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
}

.follower-select-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
}

.follower-option {
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: var(--transition);
}

.follower-option.selected {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
}

/* 标签 + 输入一体化区域：直接在该框内点击或输入 */
.follower-tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  cursor: text;
  transition: var(--transition);
}
.follower-tags-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}
.follower-tags-input .follower-input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 4px 0;
  color: var(--text-color);
  font-family: inherit;
  cursor: text;
}
.follower-tags-input .follower-input::placeholder {
  color: var(--text-light);
}
.follower-tags-input .follower-tag {
  cursor: default;
}
.tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  margin-left: 2px;
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
}
.tag-remove:hover {
  background: rgba(255, 255, 255, 0.55);
}

/* 快捷筛选胶囊分段控件（会议室预定，设计方案 §05） */
.quick-filter-group {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--gray-100);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 3px;
}
.quick-filter-btn {
  padding: 5px 14px !important;
  font-size: var(--font-sm) !important;
  font-weight: 500;
  border-radius: var(--radius-full) !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
}
.quick-filter-btn:hover {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-sm);
}
.quick-filter-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm);
}

/* ===== 设置页面 ===== */
.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.settings-tab {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.settings-tab.active {
  background: var(--gradient);
  color: #fff;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: var(--transition);
}

.settings-item:hover {
  background: var(--gray-200);
}

.settings-item .item-name {
  font-size: 14px;
}

.settings-item .item-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.order-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.order-btn:hover { background: var(--gradient); color: #fff; border-color: transparent; }

/* 响应式 */
@media (max-width: 1200px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
}

/* ===== ≤1024px：iPad 竖屏(820)、iPad mini、小笔记本 → 侧边栏改抽屉 ===== */
@media (max-width: 1024px) {
  /* 触摸设备：控件高度 ≥44px（Apple HIG 建议的触摸目标尺寸） */
  .form-control {
    min-height: 44px;
  }
  .btn {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 36px; /* 次要操作按钮允许略小 */
  }
  .follower-option {
    padding: 9px 16px; /* 常用联系人/主题/跟会人胶囊，方便手指点 */
    font-size: 14px;
  }
  /* 触屏端控件高度整体抬到 44px：自定义下拉/已选框/小按钮与 .form-control 对齐 */
  .fs-trigger,
  .tag-add-row .follower-tags,
  .tag-add-row .btn-sm {
    min-height: 44px;
  }
  /* 弹窗统一高度规则(38px)在触屏端同样抬到 44px（特异性需压过 .modal input.form-control） */
  .modal input.form-control,
  .modal select.form-control {
    min-height: 44px;
  }
  .topbar-menu-btn { display: inline-flex; }
  .theme-selector span { display: none; }
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    transition: transform 0.3s ease;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0,0,0,0.35);
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
  .main-content { margin-left: 0; }
  /* iPad 竖屏(820) 仍有足够宽度放两列统计卡片，不必缩成单列 */
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { flex-direction: column; }
  .room-layout { grid-template-columns: 1fr; }
}

/* ===== ≤768px：手机（iPhone 16 Pro 393×852）专项优化 ===== */
@media (max-width: 768px) {
  /* 兜底：清掉 JS 内联的 min-width（如导出预览弹窗 min-width:480px），
     否则 iPhone(393px) 上会横向溢出到屏幕外 */
  [style*="min-width"] { min-width: 0 !important; }

  /* 弹窗：接近全屏 + 内部滚动 + 大按钮 */
  .modal {
    width: 96%;
    max-width: 96%;
    max-height: 90vh;
    border-radius: 12px;
  }
  .modal.modal-lg,
  .modal.modal-sm {
    width: 96%;
    max-width: 96%;
  }
  .modal-header { padding: 14px 16px; }
  .modal-header h3 { font-size: 17px; }
  .modal-body { padding: 16px; }
  .modal-footer {
    padding: 12px 16px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .modal-footer .btn {
    flex: 1;
    min-width: 44%;
    min-height: 44px;   /* Apple HIG 建议触摸目标 ≥44px */
  }

  /* 顶栏：标题字号收缩，避免与右侧控件挤在一起 */
  .topbar { padding: 0 12px; gap: 8px; }
  .page-title { font-size: 16px; }
  .topbar-right { gap: 6px; }
  .topbar-right .btn { padding: 6px 10px; font-size: 13px; }

  /* 内容区留白收紧 */
  .content-area { padding: 12px; }

  /* iOS Safari 聚焦输入框时，若 font-size < 16px 会自动放大整个页面。
     强制设为 16px 可避免聚焦时页面缩放跳动（iPhone 必现问题）。 */
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control,
  .follower-input {
    font-size: 16px;
  }

  /* 表格：字号下调，减小横向滚动距离 */
  .table { font-size: 13px; }
  .table th, .table td { padding: 8px 10px; }

  /* 仪表盘统计卡片 */
  .dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
  .chart-grid { grid-template-columns: 1fr; }

  /* 卡片内边距收紧 */
  .card { padding: 14px 12px; }

  /* 快捷筛选胶囊：允许换行，避免溢出 */
  .quick-filter-group { flex-wrap: wrap; }

  /* 窄屏：跟会人/会议要求行 → 控件（下拉+数量+添加）保持一组，
     已选 chips 框独占下一行（避免"添加"按钮被挤下去和 chips 挤在一起）；
     高度沿用 ≤1024px 的 44px 规则 */
  .tag-add-row .follower-tags {
    flex: 1 1 100%;
  }
}

/* ===== iPhone 横屏（≤900px 且矮屏）===== */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { height: 48px; }
  .sidebar { overflow-y: auto; }
  .modal { max-height: 92vh; }
}

/* 云空间使用量卡片 */
.storage-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-input);
  overflow: hidden;
}
.storage-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
  min-width: 4px;
}
.storage-stat {
  flex: 1;
  min-width: 110px;
  background: var(--bg-input, rgba(0,0,0,0.04));
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.storage-stat-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main, inherit);
}
.storage-stat-label {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}