/* ══════════════════════════════════════════════════════════════
   Bootstrap 5 ← 10-Theme Bridge
   加载顺序: Bootstrap CDN → bootstrap-theme.css → page CSS
   ══════════════════════════════════════════════════════════════ */

body {
  background: var(--bg-body);
  background-image: var(--bg-gradient, var(--bg-pattern, none));
  background-size: var(--bg-pattern-size, auto);

  /* Typography */
  --bs-body-font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.6;
  --bs-border-radius: var(--radius, 2px);
  --bs-border-width: 1px;

  /* Core colors */
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-border-color: var(--border);

  /* Primary / accent */
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-primary-text-emphasis: var(--accent);

  /* Cards */
  --bs-card-bg: var(--bg-panel);
  --bs-card-cap-bg: var(--bg-panel);
  --bs-card-border-color: var(--border);
  --bs-card-color: var(--text-primary);

  /* Default buttons (uses --button-bg) */
  --bs-btn-bg: var(--button-bg);
  --bs-btn-color: var(--text-primary);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--button-hover);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-bg: var(--button-hover);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-border-color: var(--border);

  /* Primary buttons (uses --accent) */
  --bs-btn-primary-bg: var(--accent);
  --bs-btn-primary-color: #fff;
  --bs-btn-primary-border-color: var(--accent);
  --bs-btn-primary-hover-bg: var(--accent-hover);
  --bs-btn-primary-hover-color: #fff;
  --bs-btn-primary-hover-border-color: var(--accent-hover);
  --bs-btn-primary-active-bg: var(--accent-hover);
  --bs-btn-primary-active-color: #fff;

  /* Outline buttons */
  --bs-btn-outline-secondary-color: var(--text-secondary);
  --bs-btn-outline-secondary-border-color: var(--border);
  --bs-btn-outline-secondary-hover-bg: var(--button-bg);
  --bs-btn-outline-secondary-hover-color: var(--text-primary);
  --bs-btn-outline-secondary-hover-border-color: var(--border);

  /* Forms */
  --bs-input-bg: var(--bg-body);
  --bs-input-color: var(--text-primary);
  --bs-input-border-color: var(--border);
  --bs-input-focus-border-color: var(--accent);

  /* Navbar */
  --bs-navbar-color: var(--text-secondary);
  --bs-navbar-hover-color: var(--text-primary);
  --bs-navbar-active-color: var(--accent);
  --bs-navbar-brand-color: var(--text-primary);
  --bs-navbar-brand-hover-color: var(--text-primary);

  /* Links */
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);

  /* Badges */
  --bs-badge-bg: var(--button-bg);
  --bs-badge-color: var(--text-secondary);

  /* Tooltips */
  --bs-tooltip-bg: var(--text-primary);
  --bs-tooltip-color: var(--bg-panel);

  /* Dropdowns */
  --bs-dropdown-bg: var(--bg-panel);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--button-bg);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-active-bg: var(--accent);

  /* Nav pills/tabs */
  --bs-nav-link-color: var(--text-secondary);
  --bs-nav-link-hover-color: var(--text-primary);
  --bs-nav-pills-link-active-bg: var(--accent);
  --bs-nav-tabs-link-active-color: var(--accent);
  --bs-nav-tabs-link-active-border-color: var(--border);

  /* List groups */
  --bs-list-group-bg: var(--bg-panel);
  --bs-list-group-color: var(--text-primary);
  --bs-list-group-border-color: var(--border);

  /* Modals */
  --bs-modal-bg: var(--bg-panel);
  --bs-modal-color: var(--text-primary);
  --bs-modal-border-color: var(--border);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);

  /* Alerts */
  --bs-alert-bg: var(--bg-panel);
  --bs-alert-color: var(--text-primary);
  --bs-alert-border-color: var(--border);

  /* Popovers */
  --bs-popover-bg: var(--bg-panel);
  --bs-popover-body-color: var(--text-primary);
  --bs-popover-border-color: var(--border);
  --bs-popover-header-bg: var(--bg-panel);
  --bs-popover-header-color: var(--text-primary);
}

/* ── Button overrides: keep the inset shadow from original design ── */
.btn {
  box-shadow: var(--btn-shadow, inset 0 -2px 0 rgba(0,0,0,0.06));
  font-family: inherit;
}
.btn:hover { box-shadow: var(--btn-shadow, inset 0 -2px 0 rgba(0,0,0,0.06)); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06); }
.btn:focus { box-shadow: none !important; }

/* ── Form overrides ── */
.form-control, .form-select {
  font-family: inherit;
  font-size: .84rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: none;
}

/* ── Card overrides ── */
.card {
  border-radius: var(--radius, 2px);
}
.card-header {
  font-family: var(--font-heading, Georgia, serif);
  font-size: .95rem;
  font-weight: bold;
}

/* ── Navbar overrides ── */
.navbar {
  border-radius: var(--radius, 2px);
  padding: 8px 16px;
}
.navbar-brand {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.05rem;
}

/* ── Panel alias (keep .panel working alongside .card) ── */
.panel { border-radius: var(--radius, 2px); }
.panel-header {
  font-family: var(--font-heading, Georgia, serif);
  font-size: .95rem; font-weight: bold;
}

/* ── Link overrides ── */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.sidebar-brand):not(.sidebar-nav a) {
  color: var(--accent); text-decoration: none;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.sidebar-brand):not(.sidebar-nav a):hover {
  text-decoration: underline;
}

/* ── Sidebar (shared across all pages) ── */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px; min-width: 260px; position: fixed; top: 0; left: 0; bottom: 0;
  background: var(--bg-panel); border-right: 1px solid var(--border);
  padding: 20px 14px; display: flex; flex-direction: column;
  z-index: 100; overflow-y: auto;
}
.sidebar-brand {
  font-family: var(--font-heading, Georgia, serif); font-size: 1rem; font-weight: bold;
  color: var(--text-primary); text-decoration: none; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.sidebar-nav { list-style: none; flex: 1; }
.sidebar-nav li { margin-bottom: 2px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: var(--radius, 2px); color: var(--text-secondary);
  text-decoration: none; font-size: .8rem; transition: all .15s;
}
.sidebar-nav a:hover { background: var(--button-bg); color: var(--text-primary); }
.sidebar-nav a.active { background: var(--button-bg); color: var(--accent); font-weight: 600; }
.sidebar-divider { height: 1px; background: var(--border); margin: 16px 0; }
.main-content { margin-left: 260px; flex: 1; padding: 20px 24px; }

@media(max-width:768px){
  .sidebar { width:240px; min-width:240px; padding:14px 10px; }
  .sidebar-nav a { font-size:.74rem; padding:5px 8px; }
  .main-content { margin-left:240px; padding:16px 14px; }
}
@media(max-width:560px){
  .sidebar { position:relative; width:100%; min-width:100%; max-height:130px; border-right:none; border-bottom:1px solid var(--border); flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 12px; }
  .sidebar-brand { margin-bottom:0; font-size:.9rem; }
  .sidebar-nav { display:flex; flex-wrap:wrap; gap:2px; flex:none; }
  .sidebar-nav li { margin:0; }
  .sidebar-nav a { padding:3px 6px; font-size:.7rem; }
  .sidebar-divider { display:none; }
  .app-layout { flex-direction:column; }
  .main-content { margin-left:0; padding:12px; }
}

/* ── Navbar: keep existing class working alongside Bootstrap ── */
.navbar { margin-bottom: 12px; background: var(--bg-panel); border: 1px solid var(--border); }
.navbar-links { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; }
.navbar-links a { display: inline-block; padding: 6px 10px; border-radius: var(--radius, 2px); color: var(--text-secondary); text-decoration: none; font-size: .78rem; font-weight: 500; }
.navbar-links a:hover { background: var(--button-bg); color: var(--text-primary); }
.navbar-links a.active { color: var(--accent); background: var(--button-bg); font-weight: 600; }
.navbar-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }