/* ==========================================================================
   components.css — Komponen reusable (Section 11).
   ========================================================================== */

/* ============================ BUTTON ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.5625rem var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  color: var(--teks);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--tr-cepat), border-color var(--tr-cepat), transform var(--tr-cepat), box-shadow var(--tr-cepat);
  text-decoration: none;
}
.btn:hover { background: var(--border); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); }

.btn-aksen { background: var(--aksen); color: #fff; }
.btn-aksen:hover { background: var(--merah-600); }

.btn-outline { background: transparent; border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-alt); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-alt); }

.btn-danger { background: var(--bahaya); color: #fff; }
.btn-danger:hover { background: var(--merah-600); }

.btn-sm { padding: 0.375rem var(--sp-3); font-size: var(--fs-xs); }
.btn-lg { padding: 0.75rem var(--sp-6); font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn-icon { padding: 0.5rem; border-radius: var(--r-md); }

/* ============================ CARD ============================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.card-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.card-head h3, .card-head h4 { margin: 0; font-size: var(--fs-md); }
.card-body { padding: var(--sp-5); }
.card-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-alt); }
.card-hover:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }

.stat {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.stat-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--teks-lembut); font-weight: 600; }
.stat-value { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; }
.stat-hint { font-size: var(--fs-xs); color: var(--teks-samar); }
.stat-aksen { border-left: 4px solid var(--aksen); }

/* ============================ BADGE ============================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.15rem var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-sukses     { background: var(--sukses-bg);     color: var(--sukses);     border-color: color-mix(in srgb, var(--sukses) 25%, transparent); }
.badge-peringatan { background: var(--peringatan-bg); color: var(--peringatan); border-color: color-mix(in srgb, var(--peringatan) 25%, transparent); }
.badge-bahaya     { background: var(--bahaya-bg);     color: var(--bahaya);     border-color: color-mix(in srgb, var(--bahaya) 25%, transparent); }
.badge-info       { background: var(--info-bg);       color: var(--info);       border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.badge-netral     { background: var(--surface-alt);   color: var(--teks-lembut); border-color: var(--border); }
.badge-aksen      { background: var(--aksen-soft);    color: var(--aksen);      border-color: color-mix(in srgb, var(--aksen) 25%, transparent); }

/* ============================ FORM ============================ */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--teks); }
.field .hint { font-size: var(--fs-xs); color: var(--teks-samar); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.5625rem var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--teks);
  font-size: var(--fs-sm);
  transition: border-color var(--tr-cepat), box-shadow var(--tr-cepat);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--sh-focus);
}
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--bahaya);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bahaya) 22%, transparent);
}
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6773' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; }

.error-text { color: var(--bahaya); font-size: var(--fs-xs); font-weight: 500; }
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.checkbox, .radio { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; }
.checkbox input, .radio input { width: 1rem; height: 1rem; accent-color: var(--primary); }

/* ============================ TABEL ============================ */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
table.tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; }
table.tabel th, table.tabel td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tabel thead th {
  background: var(--surface-alt);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--teks-lembut);
  position: sticky;
  top: 0;
  z-index: 1;
}
table.tabel tbody tr:hover { background: var(--surface-alt); }
table.tabel tbody tr:last-child td { border-bottom: 0; }

/* ============================ TAB ============================ */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--teks-lembut);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--tr-cepat), border-color var(--tr-cepat);
}
.tab:hover { color: var(--teks); }
.tab[aria-selected='true'] { color: var(--primary); border-bottom-color: var(--primary); }

/* ============================ SKELETON & LOADER ============================ */
.skeleton {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border) 37%, var(--surface-alt) 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  height: 14px;
  margin-bottom: var(--sp-3);
}
.skeleton.title { height: 22px; width: 45%; }
.skeleton.card { height: 110px; border-radius: var(--r-lg); }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
.loading-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-6); justify-content: center; color: var(--teks-lembut); }

/* ============================ EMPTY STATE ============================ */
.empty {
  text-align: center;
  padding: var(--sp-10) var(--sp-5);
  color: var(--teks-lembut);
}
.empty i, .empty svg { width: 40px; height: 40px; margin: 0 auto var(--sp-3); opacity: .5; }
.empty h4 { color: var(--teks); margin-bottom: var(--sp-2); }

/* ============================ ALERT ============================ */
.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
}
.alert-info     { background: var(--info-bg);       border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert-sukses   { background: var(--sukses-bg);     border-color: color-mix(in srgb, var(--sukses) 30%, transparent); }
.alert-peringatan { background: var(--peringatan-bg); border-color: color-mix(in srgb, var(--peringatan) 30%, transparent); }
.alert-bahaya   { background: var(--bahaya-bg);     border-color: color-mix(in srgb, var(--bahaya) 30%, transparent); }

/* ============================ PROGRESS ============================ */
.progress {
  height: 8px;
  background: var(--surface-alt);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-full);
  transition: width var(--tr-sedang);
}
.progress.sukses > span { background: var(--sukses); }
.progress.peringatan > span { background: var(--peringatan); }
.progress.bahaya > span { background: var(--bahaya); }

/* ============================ APP SHELL ============================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding-inline: var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar-brand img { width: 34px; height: 34px; }
.topbar-brand .nama { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); line-height: 1.15; }
.topbar-brand .sub { font-size: var(--fs-xs); color: var(--teks-samar); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)); }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3);
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.sidebar-group { margin-bottom: var(--sp-5); }
.sidebar-group-title {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--teks-samar); font-weight: 700; padding: 0 var(--sp-3) var(--sp-2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.5625rem var(--sp-3);
  border-radius: var(--r-md);
  color: var(--teks-lembut);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  border: 0; background: transparent; width: 100%; text-align: left;
  transition: background-color var(--tr-cepat), color var(--tr-cepat);
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-alt); color: var(--teks); text-decoration: none; }
.nav-item[aria-current='page'] { background: var(--navy-50); color: var(--primary); font-weight: 600; }
[data-theme='dark'] .nav-item[aria-current='page'] { background: rgba(78, 155, 214, .14); }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-item .label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge {
  background: var(--aksen); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
}

.view { flex: 1 1 auto; min-width: 0; padding: var(--sp-6); }
.view-head { margin-bottom: var(--sp-6); }
.view-head h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-1); }
.view-head p { color: var(--teks-lembut); margin: 0; font-size: var(--fs-sm); }

.sidebar-toggle { display: none; }

/* ============================ TOAST ============================ */
#toast-root {
  position: fixed;
  right: var(--sp-4); bottom: var(--sp-4);
  z-index: 200;
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-sm);
  animation: fadeUp var(--tr-sedang) both;
}
.toast.sukses   { border-left-color: var(--sukses); }
.toast.bahaya   { border-left-color: var(--bahaya); }
.toast.peringatan { border-left-color: var(--peringatan); }
.toast button { background: transparent; border: 0; cursor: pointer; color: var(--teks-samar); padding: 0; line-height: 1; }

/* ============================ MODAL / DIALOG ============================ */
dialog.modal {
  border: 0;
  padding: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--teks);
  box-shadow: var(--sh-lg);
  max-width: min(560px, calc(100vw - 2rem));
  width: 100%;
  max-height: calc(100vh - 4rem);
  overflow: auto;
}
dialog.modal::backdrop { background: rgba(15, 44, 76, .55); backdrop-filter: blur(2px); }
dialog.modal .modal-head { padding: var(--sp-5) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--border); }
dialog.modal .modal-head h3 { margin: 0; font-size: var(--fs-lg); }
dialog.modal .modal-body { padding: var(--sp-5); }
dialog.modal .modal-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; }

/* ============================ MAPEL CARD ============================ */
.mapel-card {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--tr-cepat), box-shadow var(--tr-cepat), transform var(--tr-cepat);
  text-decoration: none; color: inherit;
}
.mapel-card:hover { border-color: var(--primary); box-shadow: var(--sh-md); transform: translateY(-2px); text-decoration: none; }
.mapel-card .ikon {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-md);
  background: var(--navy-50);
  color: var(--primary);
  display: grid; place-items: center;
}
[data-theme='dark'] .mapel-card .ikon { background: rgba(78, 155, 214, .14); }
.mapel-card h4 { margin: 0 0 2px; font-size: var(--fs-sm); font-weight: 600; }
.mapel-card .meta { font-size: var(--fs-xs); color: var(--teks-samar); }

/* ============================ TIMELINE / LIST ============================ */
.list-item {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: 0; }
.list-item .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  margin-top: 8px; flex: 0 0 8px;
}

/* ============================ RESPONSIF ============================ */
@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    left: 0; top: var(--topbar-h);
    z-index: 80;
    transform: translateX(-100%);
    transition: transform var(--tr-sedang);
    box-shadow: var(--sh-lg);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  body.nav-open::after {
    content: ''; position: fixed; inset: var(--topbar-h) 0 0 0;
    background: rgba(15, 44, 76, .4); z-index: 70;
  }
  .view { padding: var(--sp-4); }
}

@media (max-width: 767px) {
  h1 { font-size: var(--fs-2xl); }
  .view-head h1 { font-size: var(--fs-xl); }
  .card-body { padding: var(--sp-4); }
  .grid-3, .grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  #toast-root { left: var(--sp-4); right: var(--sp-4); }
}

@media (max-width: 400px) {
  .view { padding: var(--sp-3); }
  .btn { padding: 0.5rem var(--sp-3); }
}