/* ─────────────────────────────────────────────
   Prestasi Siswa – Public CSS
   Microsoft Fluent · Education Theme
   Malakatech © 2025
───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

.psmf-wrap {
    --pf-blue:      #0F6CBD;
    --pf-navy:      #0A2D5E;
    --pf-teal:      #0E7C7B;
    --pf-green:     #107C10;
    --pf-orange:    #D83B01;
    --pf-purple:    #6B3FA0;
    --pf-pink:      #B4009E;
    --pf-gold:      #C8961C;
    --pf-silver:    #767676;
    --pf-bronze:    #A0522D;
    --pf-gray-50:   #F8F9FA;
    --pf-gray-100:  #F1F3F5;
    --pf-gray-200:  #E5E7EB;
    --pf-gray-400:  #9CA3AF;
    --pf-gray-600:  #4B5563;
    --pf-gray-800:  #1F2937;
    --pf-white:     #FFFFFF;
    --pf-radius:    8px;
    --pf-shadow:    0 2px 12px rgba(0,0,0,.08);
    --pf-shadow-lg: 0 8px 32px rgba(0,0,0,.12);
    --pf-font:      'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
    --pf-border:    1px solid var(--pf-gray-200);
    font-family: var(--pf-font);
    color: var(--pf-gray-800);
    max-width: 1200px;
    margin: 0 auto;
}
.psmf-wrap * { box-sizing: border-box; font-family: var(--pf-font); }

/* ── HERO ── */
.psmf-hero {
    background: linear-gradient(135deg, var(--pf-navy) 0%, #1565C0 60%, #0F6CBD 100%);
    border-radius: 12px;
    padding: 48px 40px 44px;
    text-align: center;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}
.psmf-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.psmf-hero-accent {
    width: 60px; height: 4px;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    border-radius: 2px; margin: 0 auto 20px;
}
.psmf-hero-title {
    font-size: clamp(22px, 4vw, 34px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
    letter-spacing: -.5px !important;
}
.psmf-hero-sub {
    color: rgba(255,255,255,.75);
    font-size: 15px;
    margin: 0;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── STATS STRIP ── */
.psmf-stats {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    background: #fff;
    border: var(--pf-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin-bottom: 28px;
    overflow: hidden;
    box-shadow: var(--pf-shadow);
}
@media (max-width: 900px) { .psmf-stats { grid-template-columns: repeat(4, 1fr); border-radius: 0 0 8px 8px; } }
@media (max-width: 560px) { .psmf-stats { grid-template-columns: repeat(2, 1fr); } }

.psmf-stat {
    padding: 18px 12px 14px;
    text-align: center;
    border-right: var(--pf-border);
    position: relative;
    transition: background .15s;
}
.psmf-stat:last-child { border-right: none; }
.psmf-stat:hover { background: var(--pf-gray-50); }
.psmf-stat::after {
    content: '';
    position: absolute;
    bottom: 0; left: 16px; right: 16px;
    height: 3px; border-radius: 3px 3px 0 0;
    opacity: 0; transition: opacity .15s;
}
.psmf-stat:hover::after { opacity: 1; }

.psmf-stat-val { font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; letter-spacing: -1px; }
.psmf-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--pf-gray-600); }

.psmf-stat-gold    .psmf-stat-val { color: #92400E; }
.psmf-stat-gold::after             { background: #D4A017; }
.psmf-stat-silver  .psmf-stat-val { color: var(--pf-silver); }
.psmf-stat-silver::after           { background: var(--pf-silver); }
.psmf-stat-bronze  .psmf-stat-val { color: var(--pf-bronze); }
.psmf-stat-bronze::after           { background: var(--pf-bronze); }
.psmf-stat-harapan .psmf-stat-val { color: var(--pf-purple); }
.psmf-stat-harapan::after          { background: var(--pf-purple); }
.psmf-stat-terbaik .psmf-stat-val { color: var(--pf-pink); }
.psmf-stat-terbaik::after          { background: var(--pf-pink); }
.psmf-stat-akademik .psmf-stat-val { color: var(--pf-teal); }
.psmf-stat-akademik::after          { background: var(--pf-teal); }
.psmf-stat-nonakad  .psmf-stat-val { color: var(--pf-orange); }
.psmf-stat-nonakad::after           { background: var(--pf-orange); }
.psmf-stat-total   .psmf-stat-val { color: var(--pf-blue); }
.psmf-stat-total::after             { background: var(--pf-blue); }

/* ── TOOLBAR ── */
.psmf-toolbar {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap;
}
.psmf-search-wrap { position: relative; flex: 1; min-width: 220px; }
.psmf-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--pf-gray-400); pointer-events: none;
}
.psmf-input, .psmf-select {
    width: 100%;
    padding: 10px 14px;
    border: var(--pf-border);
    border-radius: var(--pf-radius);
    font-size: 14px;
    color: var(--pf-gray-800);
    background: #fff;
    font-family: var(--pf-font);
    transition: border-color .15s, box-shadow .15s;
}
.psmf-input:focus, .psmf-select:focus {
    outline: none;
    border-color: var(--pf-blue);
    box-shadow: 0 0 0 3px rgba(15,108,189,.15);
}
.psmf-input-search { padding-left: 38px; }
.psmf-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
    min-width: 150px;
}
.psmf-filters { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── TABLE ── */
.psmf-table-container {
    background: #fff;
    border: var(--pf-border);
    border-radius: 10px;
    box-shadow: var(--pf-shadow);
    overflow: hidden;
    margin-bottom: 16px;
}
.psmf-table-meta {
    padding: 12px 20px;
    font-size: 13px;
    color: var(--pf-gray-600);
    border-bottom: var(--pf-border);
    background: var(--pf-gray-50);
    font-weight: 500;
}
.psmf-table-scroll { overflow-x: auto; }
.psmf-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.psmf-table thead tr {
    background: linear-gradient(90deg, var(--pf-navy) 0%, #1565C0 100%);
}
.psmf-table thead th {
    padding: 13px 16px;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-align: left;
    border: none;
    white-space: nowrap;
}
.psmf-th-no { width: 50px; text-align: center; }

.psmf-row { border-bottom: var(--pf-border); transition: background .1s; }
.psmf-row:last-child { border-bottom: none; }
.psmf-row:nth-child(even) { background: #FAFBFC; }
.psmf-row:hover { background: #EBF3FB; }

.psmf-table td { padding: 13px 16px; vertical-align: middle; }
.psmf-no { text-align: center; color: var(--pf-gray-400); font-size: 12px; font-weight: 600; }
.psmf-event { max-width: 240px; font-weight: 500; line-height: 1.4; }
.psmf-siswa { font-weight: 700; color: var(--pf-navy); }
.psmf-kelas {
    display: inline-block;
    background: var(--pf-gray-100);
    color: var(--pf-gray-600);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

/* BADGES */
.psmf-badge, .psmf-kat {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
}
.psm-badge-gold     { background: #FEF3C7; color: #92400E; }
.psm-badge-silver   { background: #F3F4F6; color: #374151; }
.psm-badge-bronze   { background: #FDE8D8; color: #7C2D12; }
.psm-badge-harapan  { background: #EDE9FE; color: #4C1D95; }
.psm-badge-terbaik  { background: #FCE7F3; color: #831843; }
.psm-badge-finalis  { background: #DBEAFE; color: #1E3A8A; }
.psm-badge-default  { background: #F3F4F6; color: #4B5563; }

.psmf-kat-akademik    { background: #D1FAE5; color: #065F46; }
.psmf-kat-nonakademik { background: #FEE2E2; color: #7F1D1D; }

/* LOADING / EMPTY */
.psmf-loading, .psmf-empty {
    text-align: center;
    padding: 56px 20px !important;
    color: var(--pf-gray-400);
    font-size: 14px;
}
.psmf-loading::before {
    content: '';
    display: block;
    width: 32px; height: 32px;
    border: 3px solid var(--pf-gray-200);
    border-top-color: var(--pf-blue);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: psmSpin .7s linear infinite;
}
@keyframes psmSpin { to { transform: rotate(360deg); } }

/* ── PAGINATION ── */
.psmf-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.psmf-page-btn {
    min-width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--pf-radius);
    border: var(--pf-border);
    font-size: 13px; font-weight: 600;
    color: var(--pf-gray-800);
    cursor: pointer;
    background: #fff;
    transition: all .15s;
    font-family: var(--pf-font);
}
.psmf-page-btn:hover { background: #EBF3FB; color: var(--pf-blue); border-color: var(--pf-blue); }
.psmf-page-btn.active { background: var(--pf-blue); color: #fff; border-color: var(--pf-blue); }

/* ── CREDIT ── */
.psmf-credit {
    text-align: center;
    font-size: 12px;
    color: var(--pf-gray-400);
    margin-top: 8px;
}
.psmf-credit a { color: var(--pf-blue); text-decoration: none; }
.psmf-credit a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .psmf-hero { padding: 32px 20px; }
    .psmf-toolbar { flex-direction: column; }
    .psmf-filters { width: 100%; }
    .psmf-select { flex: 1; min-width: 0; }
    .psmf-table { font-size: 13px; }
    .psmf-table thead th, .psmf-table td { padding: 10px 10px; }
}

/* ── SERTIFIKAT KOLOM ── */
.psmf-td-sertif { text-align: center; white-space: nowrap; }
.psmf-sertif-link {
    display: inline-block;
    padding: 4px 12px; border-radius: 4px;
    background: #EBF3FB; color: #0F6CBD;
    font-size: 12px; font-weight: 700;
    text-decoration: none; border: 1px solid #C7DFF7;
    transition: background .15s;
}
.psmf-sertif-link:hover { background: #0F6CBD; color: #fff; }
.psmf-dash { color: #9CA3AF; font-size: 13px; }