/* Design tokens diambil dari Sistem PPDB Bintang Juara (resources/css/app.css,
   resources/views/layouts/app.blade.php) supaya konsisten satu ekosistem sekolah. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

:root{
  --color-brand: #006196;
  --color-brand-dark: #004b74;
  --color-brand-hover: #1a7bb8;
  --color-brand-light: #eff6ff;
  --color-brand-sidebar: #edf4ff;

  --color-yellow: #F5C800;
  --color-yellow-dark: #8a6416;
  --color-yellow-light: #fef9e7;

  --color-red: #D42B2B;
  --color-red-dark: #ba1a1a;
  --color-red-light: #fdeaea;

  --color-success: #2E8B57;
  --color-success-dark: #006b3c;
  --color-success-light: #e6f4ea;

  --color-bg: #f7f9ff;
  --color-surface: #ffffff;
  --color-border: #c0c7d1;
  --color-border-light: #e2efff;

  --color-text: #001d32;
  --color-text-secondary: #404850;
  --color-text-muted: #94a3b8;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
}

.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
  vertical-align:middle;
  line-height:1;
  user-select:none;
}

/* ---- Tombol ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  border:none;
  border-radius:12px;
  padding:12px 20px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .1s ease, background .15s ease;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--color-brand); color:#fff; }
.btn-primary:hover{ background:var(--color-brand-hover); }
.btn-secondary{ background:var(--color-surface); color:var(--color-brand); border:1.5px solid var(--color-border); }
.btn-secondary:hover{ background:var(--color-brand-light); }

/* ---- Kartu ---- */
.card{
  background:var(--color-surface);
  border:1.5px solid var(--color-border-light);
  border-radius:16px;
  box-shadow:0 1px 3px rgba(0,25,50,.05);
}

/* ---- Input ---- */
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--color-text-secondary);
  margin-bottom:5px;
}
.field input, .field select, .field textarea{
  width:100%;
  font-family:inherit;
  font-size:15px;
  padding:10px 12px;
  border:1.5px solid var(--color-border);
  border-radius:10px;
  background:var(--color-surface);
  color:var(--color-text);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--color-brand);
}

/* ---- Badge/pill ---- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
}
.badge-brand{ background:var(--color-brand-light); color:var(--color-brand); }
.badge-yellow{ background:var(--color-yellow-light); color:var(--color-yellow-dark); }
.badge-red{ background:var(--color-red-light); color:var(--color-red-dark); }
.badge-success{ background:var(--color-success-light); color:var(--color-success-dark); }

/* ---- Header dengan logo sekolah ---- */
.brand-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-header img{
  width:36px;
  height:36px;
  object-fit:contain;
  flex-shrink:0;
}
.brand-header .brand-name{
  font-size:15px;
  font-weight:700;
  color:var(--color-brand);
  line-height:1.15;
}
.brand-header .brand-sub{
  font-size:10px;
  font-weight:600;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.hidden{ display:none !important; }