/**
 * Grant Cards Styles
 * Style matches publication cards - font sizes aligned
 */

/* Container */
#grant-container {
  margin-top: 1rem;
  font-size: 0.92em;
}

/* Legend - compact inline format */
.grant-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
  margin-bottom: 0.8em;
  font-size: 1em;
  color: var(--grant-legend-text, #6b7280);
}

.grant-legend-item {
  display: inline;
}

.grant-legend-item strong {
  color: var(--grant-legend-strong, #374151);
}

.grant-legend-link {
  text-decoration: none;
  color: inherit;
}

.grant-legend-link strong {
  color: var(--grant-legend-strong, #374151);
}

.grant-legend-link:hover strong {
  color: var(--grant-filter-hover-border, #2563eb);
  text-decoration: underline;
}

/* Stats Bar - matches pub-stats style */
.grant-stats {
  display: flex;
  gap: 1.5em;
  margin-bottom: 1.2em;
  padding: 10px 16px;
  background: var(--grant-stats-bg, #f8f9fa);
  border-radius: 8px;
  font-size: 1em;
  flex-wrap: wrap;
}

.grant-stat {
  display: flex;
  align-items: center;
  gap: 5px;
}

.grant-stat-value {
  font-weight: 700;
  font-size: 1.1em;
  color: var(--grant-stat-value, #2563eb);
}

.grant-stat-label {
  color: var(--grant-stat-label, #6b7280);
}

/* Controls - matches pub-controls style */
.grant-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.2em;
  align-items: center;
}

.grant-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Filter buttons - matches pub-filter-btn style */
.grant-filter-btn {
  padding: 5px 14px;
  border: 1px solid var(--grant-filter-border, #d1d5db);
  border-radius: 20px;
  background: var(--grant-filter-bg, #f9fafb);
  color: inherit;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.grant-filter-btn .count {
  margin-left: 4px;
  font-size: 0.85em;
  opacity: 0.7;
}

.grant-filter-btn:hover {
  border-color: var(--grant-filter-hover-border, #2563eb);
  color: var(--grant-filter-hover-text, #2563eb);
}

.grant-filter-btn.active {
  background: var(--grant-filter-active-bg, #2563eb);
  color: var(--grant-filter-active-text, #ffffff);
  border-color: var(--grant-filter-active-border, #2563eb);
}

.grant-filter-btn.active .count {
  opacity: 1;
}

/* Role filter buttons (PI Projects / Participated) — green active color */
.grant-role-btn.active {
  background: var(--grant-role-active-bg, #059669);
  border-color: var(--grant-role-active-border, #059669);
  color: #ffffff;
}

.grant-role-btn:hover {
  border-color: var(--grant-role-hover-border, #059669);
  color: var(--grant-role-hover-text, #059669);
}

/* Separator between role buttons and source buttons */
.grant-filter-separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--grant-filter-border, #d1d5db);
  vertical-align: middle;
  margin: 0 4px;
  align-self: center;
}

/* Search input - matches pub-search style */
.grant-search {
  flex: 1;
  min-width: 180px;
  padding: 6px 12px;
  font-size: 1em;
  border: 1px solid var(--grant-search-border, #d1d5db);
  background: var(--grant-search-bg, #ffffff);
  color: var(--grant-search-text, #374151);
  border-radius: 20px;
  outline: none;
}

.grant-search:focus {
  border-color: var(--grant-search-focus, #2563eb);
}

.grant-search::placeholder {
  color: #aaa;
}

/* Grant List */
.grant-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Grant Card - left border default gray */
.grant-card {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--grant-card-bg, #ffffff);
  border: 1px solid var(--grant-card-border, #e5e7eb);
  border-left: 3px solid var(--grant-card-border-left, #d1d5db);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.grant-card:hover {
  box-shadow: var(--grant-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* Hover colors by source type */
.grant-card--nsfc:hover { border-left-color: var(--grant-nsfc, #2563eb); }
.grant-card--gbabrf:hover { border-left-color: var(--grant-gbabrf, #10b981); }
.grant-card--cpsf:hover { border-left-color: var(--grant-cpsf, #8b5cf6); }
.grant-card--sstp:hover { border-left-color: var(--grant-sstp, #f59e0b); }
.grant-card--erc:hover { border-left-color: var(--grant-erc, #ef4444); }
.grant-card--other:hover { border-left-color: var(--grant-other, #6b7280); }

/* Card Left (Icon + Year) */
.grant-card-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 50px;
}

.grant-card-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
}

.grant-card-icon-placeholder {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grant-icon-bg, #e5e7eb);
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--grant-icon-text, #374151);
}

.grant-card-year {
  font-size: 1em;
  font-weight: 600;
  color: var(--grant-year, #6b7280);
}

/* Card Content */
.grant-card-content {
  flex: 1;
  min-width: 0;
}

.grant-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.grant-source-name {
  font-weight: 600;
  font-size: 1em;
  color: var(--grant-source-name, #374151);
}

.grant-role-tag {
  padding: 0.1rem 0.4rem;
  font-size: 0.9em;
  font-weight: 600;
  border-radius: 3px;
  text-transform: uppercase;
}

.grant-role-tag--pi {
  background: var(--grant-pi-tag-bg, #fef3c7);
  color: var(--grant-pi-tag-text, #92400e);
}

.grant-role-tag--participant {
  background: var(--grant-participant-tag-bg, #dbeafe);
  color: var(--grant-participant-tag-text, #1e40af);
}

.grant-type {
  font-size: 0.9em;
  color: var(--grant-type, #6b7280);
}

.grant-title {
  font-size: 1em;
  font-weight: 500;
  color: var(--grant-title, #1f2937);
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.grant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 1em;
  color: var(--grant-meta, #6b7280);
}

.grant-number {
  font-family: monospace;
  background: var(--grant-number-bg, #f3f4f6);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

.grant-amount {
  font-weight: 500;
  color: var(--grant-amount, #059669);
}

.grant-period {
  color: var(--grant-period, #6b7280);
}

.grant-note {
  margin-top: 0.35rem;
  font-size: 0.9em;
  color: var(--grant-note, #6b7280);
  font-style: italic;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --grant-legend-text: #9ca3af;
    --grant-legend-strong: #d1d5db;
    --grant-stats-bg: #1f2937;
    --grant-stat-value: #60a5fa;
    --grant-stat-label: #9ca3af;
    --grant-filter-border: #4b5563;
    --grant-filter-bg: #374151;
    --grant-filter-hover-border: #60a5fa;
    --grant-filter-hover-text: #60a5fa;
    --grant-filter-active-bg: #2563eb;
    --grant-filter-active-text: #ffffff;
    --grant-filter-active-border: #2563eb;
    --grant-role-active-bg: #059669;
    --grant-role-active-border: #059669;
    --grant-role-hover-border: #34d399;
    --grant-role-hover-text: #34d399;
    --grant-search-border: #4b5563;
    --grant-search-bg: #1f2937;
    --grant-search-text: #d1d5db;
    --grant-search-focus: #60a5fa;
    --grant-card-bg: #1f2937;
    --grant-card-border: #374151;
    --grant-card-border-left: #4b5563;
    --grant-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --grant-nsfc: #60a5fa;
    --grant-gbabrf: #34d399;
    --grant-cpsf: #a78bfa;
    --grant-sstp: #fbbf24;
    --grant-erc: #f87171;
    --grant-other: #9ca3af;
    --grant-icon-bg: #374151;
    --grant-icon-text: #d1d5db;
    --grant-year: #9ca3af;
    --grant-source-name: #d1d5db;
    --grant-pi-tag-bg: #78350f;
    --grant-pi-tag-text: #fef3c7;
    --grant-participant-tag-bg: #1e3a5f;
    --grant-participant-tag-text: #bfdbfe;
    --grant-type: #9ca3af;
    --grant-title: #f3f4f6;
    --grant-meta: #9ca3af;
    --grant-number-bg: #374151;
    --grant-amount: #34d399;
    --grant-period: #9ca3af;
    --grant-note: #9ca3af;
  }
}

/* Responsive */
@media (max-width: 640px) {
  .grant-legend {
    gap: 0.3em 1em;
  }

  .grant-stats {
    gap: 1em;
    padding: 8px 12px;
  }

  .grant-controls {
    gap: 6px;
  }

  .grant-search {
    max-width: 100%;
    flex: 1;
    width: 100%;
    margin-top: 6px;
  }

  .grant-card {
    padding: 0.6rem 0.8rem;
    gap: 0.75rem;
  }

  .grant-card-left {
    width: 40px;
  }

  .grant-card-icon,
  .grant-card-icon-placeholder {
    width: 26px;
    height: 26px;
  }

  .grant-meta {
    flex-direction: column;
    gap: 0.2rem;
  }
}