/* GETAR Card Polish v1.2.1-card */
:root{
  --cp-blue:#2563eb;
  --cp-sky:#0ea5e9;
  --cp-green:#10b981;
  --cp-teal:#14b8a6;
  --cp-amber:#f59e0b;
  --cp-orange:#f97316;
  --cp-purple:#8b5cf6;
  --cp-pink:#ec4899;
  --cp-red:#ef4444;
  --cp-ink:#0f172a;
  --cp-muted:#64748b;
  --cp-border:#dbeafe;
  --cp-soft:#f8fbff;
  --cp-shadow:0 14px 34px rgba(37,99,235,.12);
}

/* Card polish: lebih profesional tanpa merombak struktur */
:where(.feature-card,.menu-card,.class-card,.role-card,.card,.admin-card,.dashboard-card,.stat-card,.summary-card){
  border:1px solid rgba(219,234,254,.95)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.065)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98)) padding-box,
    linear-gradient(135deg, rgba(37,99,235,.38), rgba(20,184,166,.28), rgba(245,158,11,.22)) border-box!important;
  border-radius:20px!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
  position:relative;
  overflow:hidden;
}
:where(.feature-card,.menu-card,.class-card,.role-card,.admin-card,.dashboard-card,.stat-card,.summary-card)::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-48px;
  bottom:-58px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(20,184,166,.10));
  pointer-events:none;
}
:where(.feature-card,.menu-card,.class-card,.role-card,.admin-card,.dashboard-card,.stat-card,.summary-card):hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(37,99,235,.15)!important;
}
:where(.feature-card h3,.menu-card h3,.card h3,.class-card h3){
  letter-spacing:-.01em;
}

/* Variasi warna otomatis per urutan card agar kaya warna tapi tetap lembut */
:where(.grid,.cards-responsive,.role-grid-home,.menu-grid-home,.docs-grid) > :where(a,div):nth-child(6n+1){--cp-accent:var(--cp-blue)}
:where(.grid,.cards-responsive,.role-grid-home,.menu-grid-home,.docs-grid) > :where(a,div):nth-child(6n+2){--cp-accent:var(--cp-green)}
:where(.grid,.cards-responsive,.role-grid-home,.menu-grid-home,.docs-grid) > :where(a,div):nth-child(6n+3){--cp-accent:var(--cp-amber)}
:where(.grid,.cards-responsive,.role-grid-home,.menu-grid-home,.docs-grid) > :where(a,div):nth-child(6n+4){--cp-accent:var(--cp-purple)}
:where(.grid,.cards-responsive,.role-grid-home,.menu-grid-home,.docs-grid) > :where(a,div):nth-child(6n+5){--cp-accent:var(--cp-sky)}
:where(.grid,.cards-responsive,.role-grid-home,.menu-grid-home,.docs-grid) > :where(a,div):nth-child(6n+6){--cp-accent:var(--cp-orange)}
:where(.grid,.cards-responsive,.role-grid-home,.menu-grid-home,.docs-grid) > :where(a,div){
  border-top:4px solid var(--cp-accent, var(--cp-blue))!important;
}

/* Icon garis yang disisipkan JS */
.cp-line-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--cp-accent,var(--cp-blue));
  background:color-mix(in srgb, var(--cp-accent,var(--cp-blue)) 11%, white);
  margin-bottom:10px;
  flex:0 0 auto;
}
.cp-line-icon svg{width:23px;height:23px;stroke:currentColor;display:block}
.menu-card .cp-line-icon{margin-left:auto;margin-right:auto}

/* Tombol lebih modern */
:where(.btn,button,input[type=submit]){
  border-radius:14px!important;
  font-weight:800!important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease!important;
}
:where(.btn,button,input[type=submit]):active{transform:scale(.985)}

/* Perbaikan tabel mobile, terutama pelanggaran berulang */
@media(max-width:700px){
  .table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  table.mobile-card-table{min-width:0!important;width:100%!important;border-collapse:separate!important;border-spacing:0 10px!important}
  table.mobile-card-table thead{display:none!important}
  table.mobile-card-table tbody, table.mobile-card-table tr, table.mobile-card-table td{display:block!important;width:100%!important}
  table.mobile-card-table tr{
    background:#fff;
    border:1px solid rgba(219,234,254,.95);
    border-radius:18px;
    box-shadow:0 8px 20px rgba(15,23,42,.055);
    padding:8px 10px;
    margin-bottom:10px;
    overflow:hidden;
  }
  table.mobile-card-table td{
    border:0!important;
    padding:8px 2px!important;
    display:flex!important;
    justify-content:space-between!important;
    align-items:flex-start!important;
    gap:12px!important;
    text-align:right!important;
    word-break:break-word;
  }
  table.mobile-card-table td::before{
    content:attr(data-label);
    min-width:42%;
    max-width:48%;
    text-align:left;
    font-weight:800;
    color:#334155;
  }
  table.mobile-card-table td:first-child{
    font-size:15px;
    font-weight:800;
    color:#0f172a;
    border-bottom:1px dashed #e2e8f0!important;
    margin-bottom:2px;
  }
  table.mobile-card-table td:first-child::before{color:var(--cp-blue)}
}

/* Fix khusus halaman pembinaan siswa */
.pelanggaran-berulang table,
.repeated-violations table,
#pelanggaran-berulang table{
  width:100%;
}

/* Tombol kembali double disembunyikan oleh JS, class ini sebagai pengaman */
.cp-hidden-back{display:none!important}

/* Animasi ringan */
.cp-reveal{opacity:0;transform:translateY(12px);transition:opacity .42s ease, transform .42s ease}
.cp-reveal.cp-visible{opacity:1;transform:translateY(0)}

/* Loading kecil */
.cp-loader{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);
  background:#0f172a;color:#fff;padding:10px 14px;border-radius:999px;
  box-shadow:0 14px 30px rgba(15,23,42,.24);z-index:99999;
  font-size:13px;font-weight:800;opacity:0;pointer-events:none;transition:.2s ease;
}
.cp-loader.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Form dan filter lebih halus */
:where(input,select,textarea){border-radius:14px!important}
:where(input,select,textarea):focus{box-shadow:0 0 0 4px rgba(37,99,235,.12)!important}

@supports not (color:color-mix(in srgb, red 10%, white)){
  .cp-line-icon{background:#eef4ff}
}