*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f6f8;color:#16213d}body{padding-bottom:82px}.topbar{position:sticky;top:0;z-index:10;background:#071a4b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;box-shadow:0 3px 14px #0002}.brand{display:flex;align-items:center;gap:10px}.brand img{width:48px;height:48px;object-fit:cover;border-radius:10px;background:#fff}.brand strong{display:block;font-size:20px}.brand span{display:block;font-size:10px;max-width:230px;opacity:.9}.icon-btn{border:0;background:#ffffff18;color:#fff;border-radius:12px;width:44px;height:44px;font-size:19px}.hero{margin:14px 14px 12px;border-radius:20px;min-height:190px;padding:28px 22px;display:flex;align-items:end;color:#fff;background:linear-gradient(120deg,#071a4b,#173c9a);position:relative;overflow:hidden}.hero:after{content:"M.A.M.";position:absolute;right:-25px;top:18px;font-weight:900;font-size:74px;opacity:.08;transform:rotate(-12deg)}.hero small{font-size:10px;letter-spacing:.6px}.hero h1{margin:8px 0;font-family:Georgia,serif;font-size:40px;line-height:.94}.hero p{margin:0;font-size:13px;max-width:280px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px 14px 10px}.quick-grid button{border:0;background:#fff;border-radius:16px;min-height:86px;box-shadow:0 3px 12px #10204a12;color:#0a1d50;font-size:26px;cursor:pointer}.quick-grid span{display:block;font-size:11px;font-weight:700;margin-top:7px}.section-head{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 6px}.section-head h2{font-size:17px;margin:0}.section-head button{border:0;background:none;color:#b21f2d;font-weight:700}.announcement{margin:0 14px 14px;background:#fff;border-radius:16px;padding:14px;display:flex;gap:14px;box-shadow:0 3px 12px #10204a12}.date{width:54px;height:58px;border-radius:12px;background:#f1c40f;color:#071a4b;text-align:center;padding:7px}.date b{display:block;font-size:20px}.date small{font-weight:800}.announcement h3{margin:0 0 5px;font-size:14px}.announcement p{margin:0;color:#657087;font-size:12px}.member-card{margin:10px 14px 18px;border-radius:20px;padding:18px;background:linear-gradient(135deg,#fff,#fff8dc);border:1px solid #e6c94a;box-shadow:0 5px 20px #10204a18}.member-card-head{display:flex;justify-content:space-between;align-items:center}.member-card-head small{color:#9a7610;font-weight:800}.member-card-head h2{margin:4px 0;font-family:Georgia,serif;font-size:28px}.member-card-head img{width:62px;height:62px;object-fit:cover;border-radius:50%;border:2px solid #d8ae20;background:#fff}.member-body{display:flex;gap:14px;align-items:center;margin:12px 0}.avatar{width:62px;height:74px;border-radius:10px;background:#e8e8e8;display:grid;place-items:center;font-size:28px}.member-body strong{font-size:15px}.member-body p{margin:5px 0;font-size:12px;color:#5c6576}.active{color:#16833b}.primary{width:100%;border:0;border-radius:12px;padding:12px;background:#071a4b;color:#fff;font-weight:800}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid #ddd;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -3px 15px #0001}.bottom-nav button{border:0;background:none;color:#657087;font-size:21px;display:grid;gap:2px;justify-items:center}.bottom-nav span{font-size:9px}.bottom-nav .active{color:#b21f2d}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:#071a4b;color:#fff;padding:12px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:30;font-size:13px}.toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:700px){body{max-width:520px;margin:auto;background:#e9edf4}.topbar{border-radius:0}.bottom-nav{max-width:520px;left:50%;right:auto;width:520px;transform:translateX(-50%)}}.register-form{display:grid;gap:10px;margin-top:8px}.register-form label{font-size:13px;font-weight:700}.register-form input,.register-form select,.register-form textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:10px;border:1px solid #d7dce8;border-radius:10px;font:inherit}.generated-id{margin-top:10px;padding:12px;border-radius:10px;background:#eef7ee;color:#166534}.primary:disabled{opacity:.6} /* ================================
   KAD PENGESAHAN KEAHLIAN M.A.M.
   ================================ */

.verification-card {
  max-width: 520px;
  margin: 20px auto 30px;
  padding: 24px;
  background: #fffdf4;
  border: 1.5px solid #d9b52b;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.verification-title {
  text-align: center;
  border-bottom: 1px solid #e5cf72;
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.verification-title small {
  display: block;
  color: #9a7610;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.verification-title h2 {
  margin: 0;
  color: #0b1855;
  font-family: Georgia, serif;
  font-size: 30px;
}

.verification-title p {
  margin: 6px 0 0;
  color: #24305f;
  font-size: 14px;
}

/* Status */
.verification-status {
  text-align: center;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #e9f8ee;
  color: #08752c;
  font-size: 17px;
  font-weight: 800;
}

/* Maklumat ahli */
.verification-info {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid #e5e5e5;
}

.verification-info p {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eeeeee;
  font-size: 14px;
  color: #26335f;
}

.verification-info p:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.verification-info span {
  color: #777;
}

.verification-info strong {
  color: #0b1855;
  text-align: right;
}

/* Footer */
.verification-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e5cf72;
}

.verification-footer strong {
  display: block;
  color: #0b1855;
  font-size: 16px;
  margin-bottom: 5px;
}

.verification-footer small {
  color: #777;
  font-size: 12px;
}

/* Status tidak sah */
.verification-status.invalid {
  background: #fdeaea;
  color: #b00020;
}

/* Mobile */
@media (max-width: 600px) {

  .verification-card {
    margin: 15px 10px 25px;
    padding: 18px;
    border-radius: 16px;
  }

  .verification-title h2 {
    font-size: 26px;
  }

  .verification-info p {
    flex-direction: column;
    gap: 3px;
  }

  .verification-info strong {
    text-align: left;
  }
}
/* ================================
   LOGO PENGESAHAN
   ================================ */

.verification-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
}

/* ================================
   QR PENGESAHAN
   ================================ */

.verification-qr {
  text-align: center;
  margin: 22px 0 18px;
  padding-top: 18px;
  border-top: 1px solid #e5cf72;
}

#verificationQR {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

#verificationQR canvas,
#verificationQR img {
  width: 120px !important;
  height: 120px !important;
}

.verification-qr small {
  display: block;
  color: #666;
  font-size: 11px;
  font-weight: 700;
}
/* Logo untuk Login Admin */
.login-logo {
    text-align: center;
    margin-bottom: 15px;
}

.login-logo img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: inline-block;
}
/* Susunan borang login */
#adminLoginForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#adminLoginForm label {
    display: block;
    margin-top: 5px;
}

#adminLoginForm input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
}

#adminLoginForm button {
    width: 100%;
    margin-top: 10px;
}
/* Dashboard Admin */
#adminDashboard[hidden] {
    display: none !important;
}

#adminDashboard {
    display: block;
}
/* ===============================
   FIX SENARAI AHLI - RESPONSIVE
   =============================== */

.member-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.member-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.member-table th,
.member-table td {
    padding: 5px 3px;
    font-size: 13px;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Lebar setiap column */
.member-table th:nth-child(1),
.member-table td:nth-child(1) {
    width: 17%;
}

.member-table th:nth-child(2),
.member-table td:nth-child(2) {
    width: 16%;
}

.member-table th:nth-child(3),
.member-table td:nth-child(3) {
    width: 16%;
}

.member-table th:nth-child(4),
.member-table td:nth-child(4) {
    width: 19%;
}

.member-table th:nth-child(5),
.member-table td:nth-child(5) {
    width: 12%;
}

.member-table th:nth-child(6),
.member-table td:nth-child(6) {
    width: 20%;
}

/* Butang tindakan disusun 2 x 2 */
.member-table td:last-child {
    text-align: center;
}

.member-table .mam-action-btn {
    box-sizing: border-box;
    width: calc(50% - 4px);
    min-width: 0;
    margin: 2px;
    padding: 4px 2px;
    font-size: 11px;
    white-space: normal;
}

/* Supaya teks status tak pecah pelik */
.member-status {
    font-size: 12px;
    font-weight: bold;
}

/* Mobile */
@media (max-width: 600px) {

    .member-table th,
    .member-table td {
        font-size: 12px;
        padding: 4px 2px;
    }

    .member-table .mam-action-btn {
        font-size: 10px;
        padding: 4px 1px;
    }
}

#mamManualMemberModal[hidden]{display:none!important}
#mamManualMemberModal{position:fixed;inset:0;z-index:99999}

/* MAM Manual Member modal v3 - clean single-column layout */
#mamManualMemberModal .mam-admin-modal-box, #mamEditModal .mam-admin-modal-box{
  display:block; width:min(520px,100%); box-sizing:border-box;
}
#mamManualMemberModal .mam-modal-head h3, #mamEditModal .mam-modal-head h3{
  font-size:22px; line-height:1.25; color:#173b7a;
}
#mamManualMemberForm label, #mamEditForm label{display:block; width:100%;}
#mamManualMemberForm input, #mamManualMemberForm select, #mamManualMemberForm textarea,
#mamEditForm input, #mamEditForm select, #mamEditForm textarea{display:block; width:100%; max-width:100%;}
@media(max-width:600px){
 #mamManualMemberModal, #mamEditModal{padding:10px;}
 #mamManualMemberModal .mam-admin-modal-box, #mamEditModal .mam-admin-modal-box{max-height:calc(100vh - 20px); padding:16px; border-radius:14px;}
}


/* FINAL4 - FORCE manual member modal to single column */
#mamManualMemberModal { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; }
#mamManualMemberModal .mam-admin-modal-box { display:block !important; position:relative !important; width:min(520px, calc(100vw - 28px)) !important; max-width:520px !important; margin:0 !important; box-sizing:border-box !important; }
#mamManualMemberModal .mam-modal-head { display:flex !important; width:100% !important; box-sizing:border-box !important; }
#mamManualMemberModal #mamManualMemberForm { display:block !important; width:100% !important; box-sizing:border-box !important; }
#mamManualMemberModal #mamManualMemberForm label { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:10px 0 !important; grid-column:auto !important; }
#mamManualMemberModal #mamManualMemberForm input,
#mamManualMemberModal #mamManualMemberForm select,
#mamManualMemberModal #mamManualMemberForm textarea { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; float:none !important; }
#mamManualMemberModal .mam-modal-actions { display:flex !important; width:100% !important; box-sizing:border-box !important; justify-content:flex-end !important; }
@media(max-width:600px){ #mamManualMemberModal .mam-admin-modal-box{ width:calc(100vw - 28px) !important; max-height:calc(100vh - 28px) !important; padding:16px !important; } }


/* FINAL5: manual member modal is always a single vertical column */
#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;position:relative!important;width:min(560px,calc(100vw - 28px))!important;max-width:560px!important;min-width:0!important;box-sizing:border-box!important}
#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box > .mam-modal-head,#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box > p,#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box > #mamManualMemberForm{width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;grid-column:1/-1!important;grid-area:auto!important;float:none!important;position:relative!important}
#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box > #mamManualMemberForm{display:flex!important;flex-direction:column!important;gap:0!important}
#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box > #mamManualMemberForm > label{display:block!important;width:100%!important;margin:10px 0!important}
#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box > #mamManualMemberForm input,#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box > #mamManualMemberForm select,#mamManualMemberModal > .mam-admin-modal-box.mam-manual-modal-box > #mamManualMemberForm textarea{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;float:none!important}