/* ============================================================
   assets/css/pelajar.css
   Gaya Portal Pelajar WIRA — extend dari app.css WIRA
   ============================================================ */

/* ── LOGIN (pelajar/login.php) ──────────────────────────────────── */
.pelajar-login-body{background:linear-gradient(135deg,#0a0a0a 0%,#1a0005 60%,#2d0008 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-wrap{width:100%;max-width:420px}
.login-card{background:#fff;border-radius:16px;padding:40px 44px;box-shadow:0 32px 80px rgba(0,0,0,.5)}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo img{height:64px;object-fit:contain}
.login-inst{font-size:13px;font-weight:700;color:var(--gray-600);text-align:center;text-transform:uppercase;letter-spacing:.8px;margin-top:8px}
.login-divider{height:1px;background:var(--gray-200);margin:20px 0}
.login-heading{font-size:22px;font-weight:800;color:var(--gray-900);margin-bottom:4px}
.login-sub{font-size:13px;color:var(--gray-600);margin-bottom:24px}
.login-form .form-group{margin-bottom:16px}
.login-form label{display:block;font-size:11px;font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.login-form input{width:100%;border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:11px 14px;font-size:14px;color:var(--gray-900);background:var(--gray-100);transition:border-color .2s,background .2s;font-family:var(--font)}
.login-form input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(192,0,26,.08)}
.otp-input{text-align:center;font-size:26px!important;letter-spacing:12px;font-family:monospace!important;font-weight:800}
.btn-login{width:100%;background:var(--red);color:#fff;border:none;border-radius:var(--radius);padding:13px;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:background .2s;margin-top:4px;font-family:var(--font)}
.btn-login:hover{background:var(--red-dark)}
.btn-link{background:none;border:none;color:var(--gray-600);font-size:12px;cursor:pointer;text-decoration:underline;padding:0;font-family:var(--font)}
.login-alert{display:flex;align-items:center;gap:8px;border-radius:6px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.alert-err{background:#fff0f0;border:1px solid #fecaca;color:var(--red)}
.alert-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#14532d}
.login-footer{margin-top:20px;text-align:center;font-size:12px;color:var(--gray-400)}
.resend-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.login-alt{margin-top:20px}
.alt-line{position:relative;text-align:center;margin-bottom:14px}
.alt-line::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--gray-200)}
.alt-line span{position:relative;background:#fff;padding:0 12px;font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:1px}
.btn-staf{display:flex;align-items:center;gap:12px;width:100%;border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:12px 16px;text-decoration:none;color:var(--gray-800);transition:.15s;box-sizing:border-box}
.btn-staf:hover{border-color:var(--red);background:#fff5f5}
.btn-staf .ic{font-size:24px;color:var(--red)}
.btn-staf .tx{flex:1;display:flex;flex-direction:column;line-height:1.3}
.btn-staf .tx strong{font-size:14px;font-weight:700}
.btn-staf .tx small{font-size:11.5px;color:var(--gray-500)}
.btn-staf .ar{color:var(--gray-300);font-size:18px}
.btn-staf:hover .ar{color:var(--red)}

/* ── DASHBOARD UTAMA (pelajar/index.php) ──────────────────────────────────── */
.db-hero{background:linear-gradient(120deg,#C0001A 0%,#7a0011 100%);color:#fff;border-radius:14px;padding:26px 28px;margin-bottom:20px}
.db-hero h1{font-size:23px;font-weight:800;margin:0 0 6px}
.db-hero p{margin:0;font-size:14px;color:rgba(255,255,255,.85)}
.db-alert{display:flex;align-items:center;gap:14px;border-radius:12px;padding:16px 20px;margin-bottom:20px;text-decoration:none}
.db-alert .ic{font-size:26px;flex-shrink:0}
.db-alert .tx{flex:1}
.db-alert .tx .t{font-size:15px;font-weight:700}
.db-alert .tx .s{font-size:13px;opacity:.85;margin-top:2px}
.db-alert .go{font-size:20px;opacity:.6}
.db-alert.warn{background:#fdecea;color:#991b1b;border:1px solid #f5c6cb}
.db-alert.ok{background:#ecfdf5;color:#14532d;border:1px solid #a7f3d0}
.db-sec{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--gray-500);margin:4px 0 12px}
.db-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.db-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:18px 20px;text-decoration:none;transition:.15s}
.db-card:hover{border-color:var(--red);box-shadow:0 4px 14px rgba(192,0,26,.08);transform:translateY(-1px)}
.db-card .ci{width:44px;height:44px;border-radius:11px;background:#fdecea;color:var(--red);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.db-card .tt{font-size:15px;font-weight:700;color:var(--gray-900)}
.db-card .ds{font-size:12.5px;color:var(--gray-600);margin-top:2px}
.db-card .ar{margin-left:auto;color:var(--gray-300);font-size:18px}
.db-card:hover .ar{color:var(--red)}

/* ── MAKLUMAT PERIBADI (pelajar/maklumat.php) ──────────────────────────────────── */
.mp-title{font-size:22px;font-weight:800;color:var(--gray-900);margin:0 0 4px}
.mp-sub{color:var(--gray-600);font-size:14px;margin:0 0 22px}
.mp-card{background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:20px 22px;margin-bottom:18px}
.mp-card h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--red);margin:0 0 16px;font-weight:800;display:flex;align-items:center;gap:8px}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 18px}
.mp-item .lbl{font-size:11px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.4px}
.mp-item .val{font-size:15px;color:var(--gray-900);font-weight:600;margin-top:3px;word-break:break-word}
.mp-note{display:flex;align-items:center;gap:8px;color:var(--gray-600);font-size:12.5px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:8px;padding:10px 14px;margin-bottom:20px}
.mp-flash{display:flex;align-items:center;gap:8px;border-radius:8px;padding:11px 15px;font-size:13.5px;margin-bottom:18px}
.mp-flash.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#14532d}
.mp-flash.err{background:#fdecea;border:1px solid #f5c6cb;color:#991b1b}
.mp-inp{width:100%;padding:9px 12px;border:1.5px solid var(--gray-200);border-radius:8px;font-size:14px;font-family:var(--font)}
.mp-otp{font-family:monospace;letter-spacing:6px;text-align:center;font-weight:700}
.mp-btn{background:var(--red);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font)}
.mp-btn.ghost{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-200)}
.mp-edit summary{cursor:pointer;color:var(--red);font-size:13px;font-weight:700;margin-top:8px}

/* ── SAMAN SAYA (pelajar/saman.php) ──────────────────────────────────── */
.sm-title{font-size:22px;font-weight:800;color:var(--gray-900);margin:0 0 4px}
.sm-sub{color:var(--gray-600);font-size:14px;margin:0 0 22px}
.sm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.sm-stat{background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:16px 18px}
.sm-stat .lbl{font-size:11px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.4px}
.sm-stat .val{font-size:24px;font-weight:800;color:var(--gray-900);margin-top:4px}
.sm-card{background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.sm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sm-no{font-size:15px;font-weight:800;color:var(--gray-900)}
.sm-badge{font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;white-space:nowrap}
.sm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 18px}
.sm-item .lbl{font-size:11px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.4px}
.sm-item .val{font-size:14.5px;color:var(--gray-900);font-weight:600;margin-top:2px}
.sm-amaun{font-size:20px;font-weight:800;color:var(--red)}
.sm-rayuan{margin-top:12px;padding:10px 14px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:8px}
.sm-empty{background:#fff;border:1px dashed var(--gray-300);border-radius:12px;padding:40px 20px;text-align:center;color:var(--gray-600)}

/* ── LAYOUT — sidebar & footer (pelajar/includes/footer.php) ──────────────────────────────────── */
/* Betulkan: sidebar pendek & footer tak sejajar bila kandungan halaman singkat */
.main-layout{
    align-items:stretch;
    min-height:calc(100vh - 60px); /* anggaran tinggi topbar; laraskan jika perlu */
}
.sidebar{
    align-self:stretch;
    height:auto;
}
.content{
    display:flex;
    flex-direction:column;
    min-height:calc(100vh - 60px);
}
.pp-foot{
    margin-top:auto;
    text-align:center;
    font-size:12px;
    color:var(--gray-400);
    padding:20px 0 4px;
}

/* ── PENAPIS SESI (kongsi: Kehadiran & Saman) ──────────────────────────────────── */
.kf-filter{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.kf-lbl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:.4px}
.kf-select{border:1.5px solid var(--gray-200);border-radius:8px;padding:8px 12px;font-size:13.5px;color:var(--gray-900);background:#fff;font-family:var(--font);cursor:pointer}
.kf-select:focus{outline:none;border-color:var(--red)}
.kf-btn{background:var(--red);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font)}