/**
 * Từ điển Phật học Vibudra — Style Guide CSS
 * Dùng chung: frontend list/detail, admin list/form, import.
 * Tone: học thuật, thư viện, thanh lịch, tối giản.
 * Tài liệu: docs/PHATHOC_UI_STYLE_GUIDE.md
 */

/* ========== 1. DESIGN TOKENS ========== */
:root {
  /* Colors */
  --phv-bg: #faf8f5;
  --phv-bg-warm: #f5f0e8;
  --phv-bg-card: #ffffff;
  --phv-text: #2c2820;
  --phv-text-muted: #5c5548;
  --phv-text-placeholder: #9a9185;
  --phv-accent: #6b4423;
  --phv-accent-hover: #5a3920;
  --phv-badge-bg: #f5f0e8;
  --phv-badge-accent-bg: #6b4423;
  --phv-border: #ddd6c8;
  --phv-border-light: #ebe4d8;
  --phv-success: #2d5a27;
  --phv-warning: #8a6914;
  --phv-error: #8b2e2e;

  /* Typography — ưu tiên bộ hỗ trợ tiếng Việt đầy đủ (latin-ext / vietnamese) */
  --phv-font-ui: Roboto, 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --phv-font-sans: var(--phv-font-ui);
  --phv-font-serif: 'Crimson Pro', 'Noto Serif', 'Gentium Book Plus', Georgia, 'Times New Roman', serif;
  --phv-font-display: 'Playfair Display', 'Crimson Pro', 'Noto Serif', Georgia, serif;
  --phv-font-body: 'Crimson Pro', 'Noto Serif', 'Gentium Book Plus', Georgia, serif;
  --phv-font-han: 'Noto Serif SC', 'BabelStone Han', 'SimSun', 'Songti SC', serif;
  --phv-fs-xs: 0.8rem;
  --phv-fs-sm: 0.875rem;
  --phv-fs-base: 1rem;
  --phv-fs-lg: 1.1rem;
  --phv-fs-xl: 1.15rem;
  --phv-fs-2xl: 1.2rem;
  --phv-fs-page-title: clamp(1.75rem, 4vw, 2.25rem);
  --phv-lh-tight: 1.25;
  --phv-lh-normal: 1.5;
  --phv-lh-relaxed: 1.65;
  --phv-lh-loose: 1.75;

  /* Spacing */
  --phv-space-xs: 0.25rem;
  --phv-space-sm: 0.5rem;
  --phv-space-md: 1rem;
  --phv-space-lg: 1.5rem;
  --phv-space-xl: 2rem;
  --phv-space-2xl: 2.5rem;

  /* Radii */
  --phv-radius-sm: 4px;
  --phv-radius-md: 6px;
  --phv-radius-lg: 8px;
  --phv-radius-xl: 10px;

  /* Shadow */
  --phv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --phv-shadow-md: 0 1px 4px rgba(0, 0, 0, 0.04);
  --phv-shadow-focus: 0 0 0 2px rgba(107, 68, 35, 0.12);
}

/* Compatibility: map old --phathoc-* to --phv-* for existing views */
.phv-root,
.phathoc-academic,
.phathoc-term-page,
[class*="phathoc-"] {
  --phathoc-bg: var(--phv-bg);
  --phathoc-warm: var(--phv-bg-warm);
  --phathoc-border: var(--phv-border);
  --phathoc-ink: var(--phv-text);
  --phathoc-muted: var(--phv-text-muted);
  --phathoc-accent: var(--phv-accent);
  --phathoc-serif: var(--phv-font-serif);
  --phathoc-display: var(--phv-font-display);
  --phathoc-ui: var(--phv-font-ui);
  --phathoc-body: var(--phv-font-body);
}

/* ========== 2. TYPOGRAPHY ========== */
.phv-title-page {
  font-family: var(--phv-font-display);
  font-size: var(--phv-fs-page-title);
  font-weight: 600;
  color: var(--phv-text);
  line-height: var(--phv-lh-tight);
  letter-spacing: normal;
  margin: 0 0 var(--phv-space-sm);
}

.phv-title-section {
  font-family: var(--phv-font-serif);
  font-size: var(--phv-fs-2xl);
  font-weight: 600;
  color: var(--phv-text);
  letter-spacing: normal;
  margin: 0 0 var(--phv-space-md);
  padding-bottom: var(--phv-space-sm);
  border-bottom: 1px solid var(--phv-border-light);
}

.phv-title-card {
  font-family: var(--phv-font-display);
  font-size: var(--phv-fs-xl);
  font-weight: 600;
  color: var(--phv-text);
  margin: 0 0 var(--phv-space-sm);
  line-height: var(--phv-lh-tight);
  letter-spacing: normal;
}

.phv-text-sm {
  font-size: var(--phv-fs-sm);
  line-height: var(--phv-lh-normal);
  color: var(--phv-text-muted);
}

.phv-text-xs {
  font-size: var(--phv-fs-xs);
  line-height: 1.4;
  color: var(--phv-text-muted);
}

.phv-font-han {
  font-family: var(--phv-font-han);
}

/* ========== 3. LAYOUT ========== */
.phv-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.phv-container--wide {
  max-width: 1100px;
}

.phv-section {
  margin-bottom: var(--phv-space-xl);
}

.phv-section + .phv-section {
  margin-top: var(--phv-space-lg);
}

/* ========== 4. BUTTONS ========== */
.phv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--phv-space-sm);
  padding: 0.5rem 1rem;
  font-size: var(--phv-fs-sm);
  font-weight: 500;
  font-family: var(--phv-font-sans);
  border-radius: var(--phv-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.phv-btn--primary {
  background: var(--phv-accent);
  color: #fff;
  border-color: var(--phv-accent);
}

.phv-btn--primary:hover {
  background: var(--phv-accent-hover);
  border-color: var(--phv-accent-hover);
  color: #fff;
}

.phv-btn--secondary {
  background: var(--phv-bg-card);
  color: var(--phv-text);
  border-color: var(--phv-border);
}

.phv-btn--secondary:hover {
  background: var(--phv-bg-warm);
  border-color: var(--phv-accent);
  color: var(--phv-accent);
}

.phv-btn--sm {
  padding: 0.35rem 0.75rem;
  font-size: var(--phv-fs-xs);
}

.phv-btn--lg {
  padding: 0.875rem 1.5rem;
  font-size: var(--phv-fs-base);
  font-weight: 600;
}

/* ========== 5. BADGES ========== */
.phv-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--phv-radius-sm);
  background: var(--phv-badge-bg);
  color: var(--phv-text-muted);
  border: 1px solid var(--phv-border);
}

.phv-badge--accent {
  background: var(--phv-badge-accent-bg);
  color: #fff;
  border-color: var(--phv-accent);
}

.phv-badge--success { color: var(--phv-success); }
.phv-badge--warning { color: var(--phv-warning); }
.phv-badge--error { color: var(--phv-error); }

/* ========== 6. CARDS ========== */
.phv-card {
  background: var(--phv-bg-card);
  border: 1px solid var(--phv-border);
  border-radius: var(--phv-radius-xl);
  padding: var(--phv-space-lg);
  box-shadow: var(--phv-shadow-md);
  margin-bottom: var(--phv-space-md);
}

.phv-card__title {
  font-family: var(--phv-font-serif);
  font-size: var(--phv-fs-lg);
  font-weight: 600;
  color: var(--phv-text);
  margin: 0 0 var(--phv-space-md);
  padding-bottom: var(--phv-space-sm);
  border-bottom: 1px solid var(--phv-border-light);
}

.phv-card__body {
  font-size: var(--phv-fs-base);
  line-height: var(--phv-lh-loose);
  color: var(--phv-text);
}

/* ========== 7. FORM: INPUT, TEXTAREA, SELECT ========== */
.phv-input,
.phv-textarea,
.phv-select {
  width: 100%;
  font-family: var(--phv-font-sans);
  font-size: var(--phv-fs-base);
  color: var(--phv-text);
  background: var(--phv-bg-card);
  border: 1px solid var(--phv-border);
  border-radius: var(--phv-radius-md);
  padding: 0.5rem 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.phv-input::placeholder,
.phv-textarea::placeholder {
  color: var(--phv-text-placeholder);
}

.phv-input:focus,
.phv-textarea:focus,
.phv-select:focus {
  outline: none;
  border-color: var(--phv-accent);
  box-shadow: var(--phv-shadow-focus);
}

.phv-input--lg,
.phv-textarea--lg {
  padding: 0.875rem 1rem;
  font-size: var(--phv-fs-lg);
}

.phv-textarea {
  min-height: 100px;
  resize: vertical;
}

.phv-select {
  cursor: pointer;
  appearance: auto;
}

.phv-select--warm {
  background: var(--phv-bg-warm);
}

.phv-label {
  display: block;
  font-size: var(--phv-fs-sm);
  font-weight: 500;
  color: var(--phv-text-muted);
  margin-bottom: var(--phv-space-xs);
}

.phv-form-group {
  margin-bottom: var(--phv-space-md);
}

.phv-form-group--lg {
  margin-bottom: var(--phv-space-lg);
}

.phv-hint {
  font-size: var(--phv-fs-xs);
  color: var(--phv-text-muted);
  margin-top: var(--phv-space-xs);
}

/* ========== 8. TABLE ========== */
.phv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--phv-fs-sm);
  border: 1px solid var(--phv-border);
  border-radius: var(--phv-radius-md);
  overflow: hidden;
}

.phv-table th,
.phv-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--phv-border-light);
}

.phv-table th {
  background: var(--phv-bg-warm);
  font-weight: 600;
  color: var(--phv-text);
}

.phv-table tr:last-child td {
  border-bottom: 0;
}

.phv-table--striped tbody tr:nth-child(even) {
  background: rgba(245, 240, 232, 0.5);
}

/* ========== 9. FILTER CHIPS ========== */
.phv-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--phv-space-sm);
}

.phv-chip {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: var(--phv-fs-sm);
  font-weight: 500;
  color: var(--phv-text);
  background: var(--phv-bg-card);
  border: 1px solid var(--phv-border);
  border-radius: var(--phv-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.phv-chip:hover {
  background: var(--phv-bg-warm);
  border-color: var(--phv-accent);
  color: var(--phv-accent);
}

.phv-chip--active {
  background: var(--phv-accent);
  border-color: var(--phv-accent);
  color: #fff;
}

.phv-chip--active:hover {
  color: #fff;
}

/* ========== 10. TABS ========== */
.phv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--phv-space-sm);
  border-bottom: 1px solid var(--phv-border);
  margin-bottom: var(--phv-space-md);
}

.phv-tab {
  padding: var(--phv-space-sm) var(--phv-space-md);
  font-size: var(--phv-fs-sm);
  font-weight: 500;
  color: var(--phv-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}

.phv-tab:hover {
  color: var(--phv-accent);
}

.phv-tab--active {
  color: var(--phv-accent);
  border-bottom-color: var(--phv-accent);
}

/* ========== 11. SIDEBAR BOX ========== */
.phv-sidebar-box {
  background: var(--phv-bg-card);
  border: 1px solid var(--phv-border);
  border-radius: var(--phv-radius-xl);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--phv-shadow-md);
  margin-bottom: var(--phv-space-md);
}

.phv-sidebar-box__title {
  font-family: var(--phv-font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--phv-text);
  margin: 0 0 var(--phv-space-sm);
}

.phv-sidebar-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--phv-fs-sm);
  line-height: 1.6;
}

.phv-sidebar-box__list li {
  margin-bottom: var(--phv-space-xs);
}

.phv-sidebar-box__list a {
  color: var(--phv-accent);
  text-decoration: none;
}

.phv-sidebar-box__list a:hover {
  text-decoration: underline;
}

/* ========== 12. ALERTS / STATES ========== */
.phv-alert {
  padding: var(--phv-space-md) var(--phv-space-lg);
  border-radius: var(--phv-radius-md);
  border: 1px solid;
  font-size: var(--phv-fs-sm);
  line-height: var(--phv-lh-relaxed);
}

.phv-alert--info {
  background: rgba(224, 232, 240, 0.5);
  border-color: var(--phv-border);
  color: var(--phv-text);
}

.phv-alert--warning {
  background: rgba(248, 240, 220, 0.6);
  border-color: var(--phv-warning);
  color: var(--phv-warning);
}

.phv-alert--error {
  background: rgba(240, 220, 220, 0.5);
  border-color: var(--phv-error);
  color: var(--phv-error);
}

.phv-alert--success {
  background: rgba(220, 240, 220, 0.5);
  border-color: var(--phv-success);
  color: var(--phv-success);
}

/* ========== 13. UTILITIES (optional) ========== */
.phv-mb-sm { margin-bottom: var(--phv-space-sm); }
.phv-mb-md { margin-bottom: var(--phv-space-md); }
.phv-mb-lg { margin-bottom: var(--phv-space-lg); }
.phv-mt-md { margin-top: var(--phv-space-md); }
.phv-mt-lg { margin-top: var(--phv-space-lg); }
.phv-text-muted { color: var(--phv-text-muted); }
.phv-text-accent { color: var(--phv-accent); }