/* ============================================================
   assets/css/style.css — Sistem Evaluasi Wasit Embu Shorinji Kempo
   Design: Deep Navy + Red Accent, Japanese-Martial aesthetic
   ============================================================ */

:root {
  --sk-navy:        #0d1b2a;
  --sk-navy-light:  #162236;
  --sk-red:         #c0392b;
  --sk-red-light:   #e74c3c;
  --sk-gold:        #d4a017;
  --sk-gold-light:  #f0c040;
  --sk-gray-bg:     #f4f6f9;
  --sk-border:      #dee2e6;
  --sk-text:        #212529;
  --sk-muted:       #6c757d;
  --sk-card-shadow: 0 2px 12px rgba(13,27,42,.08);
  --sk-radius:      10px;
}

/* ---- BASE ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--sk-gray-bg);
  color: var(--sk-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: .9375rem;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

.fw-700 { font-weight: 700 !important; }

/* ---- NAVBAR ----------------------------------------------- */
.sk-navbar {
  background: var(--sk-navy);
  border-bottom: 3px solid var(--sk-red);
  padding: .6rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.sk-logo-badge {
  width: 38px; height: 38px;
  background: var(--sk-red);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(192,57,43,.4);
}

.sk-brand-sub {
  font-size: .65rem;
  opacity: .7;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sk-navbar .nav-link {
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  font-weight: 500;
  border-radius: 6px;
  padding: .4rem .75rem;
  transition: all .15s;
}
.sk-navbar .nav-link:hover,
.sk-navbar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.1);
}
.sk-navbar .nav-link.active {
  background: var(--sk-red);
}

.sk-ptdg-select {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  color: #fff;
  font-size: .8rem;
  min-width: 220px;
}
.sk-ptdg-select option { background: var(--sk-navy); }

/* ---- BREADCRUMB ------------------------------------------ */
.sk-breadcrumb {
  background: #fff;
  border-bottom: 1px solid var(--sk-border);
  font-size: .82rem;
}
.breadcrumb-item a { color: var(--sk-red); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ---- MAIN ------------------------------------------------- */
.sk-main { flex: 1; padding: 1.5rem; }

/* ---- FOOTER ----------------------------------------------- */
.sk-footer {
  background: var(--sk-navy);
  color: rgba(255,255,255,.5);
}

/* ---- PAGE HEADER ------------------------------------------ */
.sk-page-header {
  background: linear-gradient(135deg, var(--sk-navy) 0%, var(--sk-navy-light) 100%);
  border-radius: var(--sk-radius);
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.sk-page-header::before {
  content: '';
  position: absolute; right: -20px; top: -20px;
  width: 160px; height: 160px;
  background: rgba(192,57,43,.15);
  border-radius: 50%;
}
.sk-page-header h1 { color: #fff; font-size: 1.5rem; margin: 0; }
.sk-page-header .text-muted { color: rgba(255,255,255,.55) !important; font-size: .85rem; }
.sk-page-header .sk-ph-icon {
  width: 52px; height: 52px;
  background: var(--sk-red);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
  box-shadow: 0 4px 12px rgba(192,57,43,.35);
}

/* ---- CARDS ----------------------------------------------- */
.sk-card {
  background: #fff;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-card-shadow);
}
.sk-card .sk-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sk-border);
  background: var(--sk-gray-bg);
  border-radius: var(--sk-radius) var(--sk-radius) 0 0;
  font-weight: 600;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: space-between;
}
.sk-card-body { padding: 1.25rem; }

/* ---- STAT CARDS ------------------------------------------ */
.sk-stat {
  background: #fff;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: var(--sk-card-shadow);
}
.sk-stat-icon {
  width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.sk-stat-icon.red   { background: rgba(192,57,43,.1);  color: var(--sk-red); }
.sk-stat-icon.navy  { background: rgba(13,27,42,.1);   color: var(--sk-navy); }
.sk-stat-icon.gold  { background: rgba(212,160,23,.1); color: var(--sk-gold); }
.sk-stat-icon.green { background: rgba(39,174,96,.1);  color: #27ae60; }
.sk-stat-val  { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.sk-stat-lbl  { font-size: .78rem; color: var(--sk-muted); margin-top: .2rem; }

/* ---- TABLES ---------------------------------------------- */
.sk-table {
  width: 100%; border-collapse: collapse; font-size: .87rem;
}
.sk-table th {
  background: var(--sk-navy);
  color: #fff; font-weight: 600;
  padding: .65rem 1rem;
  text-align: left;
  white-space: nowrap;
}
.sk-table td { padding: .55rem 1rem; border-bottom: 1px solid var(--sk-border); }
.sk-table tbody tr:hover { background: rgba(13,27,42,.03); }
.sk-table tbody tr:last-child td { border-bottom: none; }

/* Numeric cells */
.sk-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- NILAI INPUT GRID ------------------------------------- */
.sk-nilai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: .4rem;
}
.sk-nilai-input {
  text-align: center;
  font-size: .85rem;
  padding: .3rem .25rem;
  border: 1.5px solid var(--sk-border);
  border-radius: 6px;
  transition: border-color .15s;
}
.sk-nilai-input:focus {
  border-color: var(--sk-red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(192,57,43,.15);
}
.sk-nilai-input.teknik  { background: #fff8f0; }
.sk-nilai-input.presentasi { background: #f0f8ff; }

/* ---- BADGE ------------------------------------------------ */
.sk-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 20px;
  font-size: .75rem; font-weight: 600;
}
.sk-badge.red   { background: rgba(192,57,43,.12); color: var(--sk-red); }
.sk-badge.navy  { background: rgba(13,27,42,.1);   color: var(--sk-navy); }
.sk-badge.gold  { background: rgba(212,160,23,.15); color: #a07010; }
.sk-badge.green { background: rgba(39,174,96,.12); color: #1e7e44; }
.sk-badge.gray  { background: #f0f0f0; color: #555; }

/* ---- BUTTONS ---------------------------------------------- */
.btn-sk-primary {
  background: var(--sk-red);
  border-color: var(--sk-red);
  color: #fff; font-weight: 600;
}
.btn-sk-primary:hover {
  background: var(--sk-red-light);
  border-color: var(--sk-red-light);
  color: #fff;
}
.btn-sk-navy {
  background: var(--sk-navy);
  border-color: var(--sk-navy);
  color: #fff; font-weight: 600;
}
.btn-sk-navy:hover {
  background: var(--sk-navy-light);
  color: #fff;
}

/* ---- FORMS ----------------------------------------------- */
.form-label { font-weight: 600; font-size: .85rem; color: var(--sk-text); }
.form-control:focus, .form-select:focus {
  border-color: var(--sk-red);
  box-shadow: 0 0 0 .2rem rgba(192,57,43,.2);
}

/* ---- CHART CONTAINERS ------------------------------------ */
.sk-chart-wrap {
  position: relative; width: 100%;
}

/* ---- ANALISIS SECTIONS ----------------------------------- */
.sk-section-title {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1rem; font-weight: 700;
  color: var(--sk-navy);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--sk-red);
}

/* ---- WASIT PROFILE RADAR --------------------------------- */
.sk-radar-card {
  background: #fff;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  padding: 1rem;
  text-align: center;
}
.sk-radar-card .wasit-name {
  font-weight: 700; font-size: .9rem;
  color: var(--sk-navy);
  margin-bottom: .25rem;
}
.sk-radar-card .wasit-meta {
  font-size: .75rem; color: var(--sk-muted);
}

/* ---- HEATMAP --------------------------------------------- */
.sk-heatmap-cell {
  width: 100%; aspect-ratio: 1.5;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 600;
  transition: transform .1s;
  cursor: default;
}
.sk-heatmap-cell:hover { transform: scale(1.05); }

/* ---- AI PANEL -------------------------------------------- */
.sk-ai-panel {
  background: linear-gradient(135deg, var(--sk-navy) 0%, #1a2e45 100%);
  border-radius: var(--sk-radius);
  padding: 1.5rem;
  color: #fff;
}
.sk-ai-output {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 1rem;
  font-size: .875rem;
  min-height: 120px;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ---- RESPONSIVE ------------------------------------------ */
@media (max-width: 768px) {
  .sk-main { padding: 1rem .75rem; }
  .sk-page-header { padding: 1.1rem 1.25rem; }
  .sk-table th, .sk-table td { padding: .45rem .6rem; font-size: .82rem; }
}