/* ===========================
   Palmer Penguins Dashboard
   Custom Theme
   =========================== */

:root {
  /* Penguin species colors */
  --color-adelie: #ff6b35;
  --color-chinstrap: #6c5ce7;
  --color-gentoo: #00b894;

  /* Primary palette */
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1d4ed8;

  /* Gray scale */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* === Base === */

body {
  font-family: var(--font-sans);
  color: var(--gray-800);
  background-color: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

p {
  color: var(--gray-600);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-primary-dark);
}

#quarto-content {
  background-color: var(--gray-50);
}

/* === Sidebar === */

#quarto-sidebar {
  background-color: var(--gray-100);
  border-right: 1px solid var(--gray-200);
}

#quarto-sidebar .sidebar-item a {
  color: var(--gray-600);
  transition: color 0.15s ease;
}

#quarto-sidebar .sidebar-item a:hover {
  color: var(--color-primary);
  background: transparent;
}

#quarto-sidebar .sidebar-item.active a,
#quarto-sidebar .sidebar-item a.active {
  color: var(--color-primary);
  font-weight: 600;
  background: transparent;
}

/* === Panel Tabset === */

.panel-tabset {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.panel-tabset .nav-tabs {
  background-color: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 1rem;
}

.panel-tabset .nav-tabs .nav-link {
  color: var(--gray-500);
  border: none;
  padding: 0.75rem 1rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.panel-tabset .nav-tabs .nav-link:hover {
  color: var(--gray-800);
}

.panel-tabset .nav-tabs .nav-link.active {
  color: var(--color-primary);
  background: transparent;
  border-bottom: 2px solid var(--color-primary);
}

.panel-tabset .tab-content {
  padding: 1.5rem;
}

/* === Tables === */

table {
  width: 100%;
  border-collapse: collapse;
}

table thead th {
  background-color: var(--gray-100);
  color: var(--gray-700);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reactable {
  font-size: 0.9rem;
}

.reactable .rt-thead .rt-th {
  background-color: var(--gray-100);
  color: var(--gray-700);
  font-weight: 600;
}

.reactable .rt-tbody .rt-tr:hover {
  background-color: var(--gray-50);
}

/* === Blockquotes / Callouts === */

blockquote {
  background-color: var(--gray-100);
  border-left: 4px solid var(--color-primary);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* === Iframes === */

iframe {
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

/* === Footer === */

.quarto-footer, #quarto-footer {
  background-color: var(--gray-100);
  border-top: 1px solid var(--gray-200);
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* === TOC === */

#TOC a {
  color: var(--gray-600);
}

#TOC a.active {
  color: var(--gray-900);
  font-weight: 600;
}

/* === Grid helpers === */

.grid {
  display: grid;
  gap: 1.5rem;
}

/* === Species color utilities === */

.species-adelie { color: var(--color-adelie); }
.species-chinstrap { color: var(--color-chinstrap); }
.species-gentoo { color: var(--color-gentoo); }

.badge-adelie {
  background-color: var(--color-adelie);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-chinstrap {
  background-color: var(--color-chinstrap);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-gentoo {
  background-color: var(--color-gentoo);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* === Utility === */

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}