:root {
  --color-brand-cream: #f8fafc;
  --color-brand-clay: #0f172a;
  --color-brand-earth: #059669;
  --color-brand-sage: #10b981;
  --color-brand-ochre: #f59e0b;
  --color-brand-sand: #ffffff;
  --color-brand-pebble: #e2e8f0;
  --color-brand-warm-gray: #64748b;
  --color-brand-dust: #94a3b8;
  --color-brand-linen: #ecfdf5;
}

body {
  background-color: var(--color-brand-cream);
  color: var(--color-brand-clay);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-serif-app {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.bg-brand-cream { background-color: var(--color-brand-cream); }
.bg-brand-clay { background-color: var(--color-brand-clay); }
.bg-brand-earth { background-color: var(--color-brand-earth); }
.bg-brand-sage { background-color: var(--color-brand-sage); }
.bg-brand-ochre { background-color: var(--color-brand-ochre); }
.bg-brand-sand { background-color: var(--color-brand-sand); }
.bg-brand-pebble { background-color: var(--color-brand-pebble); }
.bg-brand-linen { background-color: var(--color-brand-linen); }

.text-brand-cream { color: var(--color-brand-cream); }
.text-brand-clay { color: var(--color-brand-clay); }
.text-brand-earth { color: var(--color-brand-earth); }
.text-brand-sage { color: var(--color-brand-sage); }
.text-brand-ochre { color: var(--color-brand-ochre); }
.text-brand-warm-gray { color: var(--color-brand-warm-gray); }
.text-brand-dust { color: var(--color-brand-dust); }
.text-brand-linen { color: var(--color-brand-linen); }

.border-brand-pebble { border-color: var(--color-brand-pebble) !important; }
.border-brand-clay { border-color: var(--color-brand-clay) !important; }
.border-brand-earth { border-color: var(--color-brand-earth) !important; }

.object-contain { object-fit: contain; }
.shrink-0 { flex-shrink: 0 !important; }

/* Custom components matching Modern design */
.header-app {
  background: linear-gradient(135deg, #065f46 0%, #059669 100%);
  border-bottom: none;
  box-shadow: 0 4px 20px -2px rgba(5, 150, 105, 0.3);
}

.card-app {
  background-color: #fff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 1.25rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  backdrop-filter: blur(10px);
}

.btn-earth {
  background: linear-gradient(135deg, var(--color-brand-earth) 0%, var(--color-brand-sage) 100%);
  color: #ffffff;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
}
.btn-earth:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px -2px rgba(16, 185, 129, 0.4);
}

.btn-outline-brand {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}
.btn-outline-brand:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}

.badge-jilid {
  background-color: var(--color-brand-linen);
  color: var(--color-brand-earth);
  border: 1px solid rgba(16, 185, 129, 0.2);
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  box-shadow: 0 2px 5px -1px rgba(16, 185, 129, 0.1);
}

.avg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.2rem;
  width: 3.2rem;
  border-radius: 0.5rem;
  font-family: 'Inter', monospace;
  font-weight: 800;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.avg-sangat-baik { color: #065f46; background-color: #d1fae5; }
.avg-baik { color: #b45309; background-color: #fef3c7; }
.avg-cukup { color: #1e40af; background-color: #dbeafe; }
.avg-kurang { color: #9f1239; background-color: #ffe4e6; }
.avg-none { color: var(--color-brand-warm-gray); background-color: #f1f5f9; }

/* Printable Raport CSS */
@media print {
  body {
    background-color: #fff !important;
    color: #000 !important;
  }
  .no-print {
    display: none !important;
  }
  .print-card-container {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  #printable-raport {
    border: none !important;
    background-color: #fff !important;
    padding: 0 !important;
  }
}