/* ── CSS custom properties: one place to change per theme ──────────────── */
:root {
  --pc-bg:            #ffffff;
  --pc-bg-alt:        #f8fafc;
  --pc-border:        #e2e8f0;
  --pc-text:          #374151;
  --pc-heading:       #1e293b;
  --pc-scrollbar:     #94a3b8;
  --pc-scrollbar-bg:  #f1f5f9;
  --pc-hint:          #94a3b8;
  --pc-badge-dl-bg:   #fef3c7;
  --pc-badge-dl-text: #92400e;
  --pc-badge-od-bg:   #fef2f2;
  --pc-badge-od-text: #dc2626;
  --pc-locked-bg:     #fef2f2;
  --pc-locked-border: #fecaca;
  --pc-locked-text:   #dc2626;
  --pc-alert-bg:      transparent;
  --pc-alert-border:  transparent;
  --pc-alert-text:    inherit;
}

body.dark-mode {
  --pc-bg:            #252838;
  --pc-bg-alt:        #1e2130;
  --pc-border:        rgba(255, 255, 255, 0.09);
  --pc-text:          #c8cfe0;
  --pc-heading:       #e2e8f0;          /* ← was #000 — the main bug */
  --pc-scrollbar:     #4a5172;
  --pc-scrollbar-bg:  #1a1d28;
  --pc-hint:          #6b7280;
  --pc-badge-dl-bg:   #2d3748;
  --pc-badge-dl-text: #fbbf24;
  --pc-badge-od-bg:   rgba(220, 38, 38, 0.2);
  --pc-badge-od-text: #f87171;
  --pc-locked-bg:     rgba(220, 38, 38, 0.12);
  --pc-locked-border: rgba(220, 38, 38, 0.35);
  --pc-locked-text:   #f87171;
  --pc-alert-bg:      rgba(96, 165, 250, 0.10);
  --pc-alert-border:  rgba(96, 165, 250, 0.25);
  --pc-alert-text:    #93c5fd;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
body.dark-mode .content-wrapper {
  background-color: var(--pc-bg-alt) !important;
}

/* ── Card shell ─────────────────────────────────────────────────────────── */
.policy-card {
  border: 1px solid var(--pc-border);
  border-radius: 10px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* ── Card header ────────────────────────────────────────────────────────── */
.policy-card-header {
  background: var(--pc-bg-alt);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--pc-border);
}

.policy-card-header h5 {
  margin: 0;
  font-weight: 600;
  color: var(--pc-heading);   /* respects both light and dark via custom prop */
}

/* ── Scrollable content ─────────────────────────────────────────────────── */
.policy-content-scroll {
  height: 380px;
  overflow-y: auto;
  padding: 1.25rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--pc-text);
  background: var(--pc-bg);
  border-bottom: 1px solid var(--pc-border);
}

/*
 * Force-override any inline colours that come from {$pv.content} HTML.
 * Without this, rich-text content with hardcoded dark colours stays dark
 * in dark mode (the "美商舵盟…" heading issue).
 */
body.dark-mode .policy-content-scroll * {
  color: var(--pc-text) !important;
  background-color: transparent !important;
}

/* Scrollbar */
.policy-content-scroll::-webkit-scrollbar        { width: 6px; }
.policy-content-scroll::-webkit-scrollbar-track  { background: var(--pc-scrollbar-bg); }
.policy-content-scroll::-webkit-scrollbar-thumb  { background: var(--pc-scrollbar); border-radius: 3px; }

/* ── Card footer ────────────────────────────────────────────────────────── */
.policy-card-footer {
  padding: .75rem 1.25rem;
  background: var(--pc-bg-alt);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Helper elements ────────────────────────────────────────────────────── */
.scroll-hint {
  font-size: .8rem;
  color: var(--pc-hint);
}

.deadline-badge {
  font-size: .78rem;
  padding: .25rem .6rem;
  border-radius: 4px;
  background: var(--pc-badge-dl-bg);
  color: var(--pc-badge-dl-text);
}

.deadline-badge.overdue {
  background: var(--pc-badge-od-bg);
  color: var(--pc-badge-od-text);
}

.locked-banner {
  background: var(--pc-locked-bg);
  border: 1px solid var(--pc-locked-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--pc-locked-text);
}

.alert-info {
  background:   var(--pc-alert-bg)     !important;
  border-color: var(--pc-alert-border) !important;
  color:        var(--pc-alert-text)   !important;
  border-radius: 8px;
}

/* ── Navigation lock ────────────────────────────────────────────────────── */
.main-sidebar {
  pointer-events: none !important;
  opacity: 0.35 !important;
  user-select: none !important;
}

.page-title-icon {
  color: #4f46e5;
  transition: color 0.2s ease;
}

body.dark-mode .page-title-icon {
  color: #818cf8;
}

/* ── Page title ─────────────────────────────────────────────────────────── */
.content-header h1.page-title-text {
  color: #1e293b;
  transition: color 0.2s ease;
}

body.dark-mode .content-header h1.page-title-text {
  color: #e2e8f0;
}