:root{--navy:#071a37;--blue:#0b4f9c;--red:#d71920;--gold:#f2c94c;--soft:#f5f7fb;--line:#d9e2ef;--text:#0f172a;--muted:#667085}

*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:#eef2f7;color:var(--text)}button,input,select,textarea{font-family:inherit}button{border:0;border-radius:12px;background:linear-gradient(135deg,var(--blue),#0a2c5f);color:#fff;font-weight:800;padding:10px 14px;cursor:pointer}button:hover{filter:brightness(1.05)}button.small{padding:6px 9px;border-radius:9px;font-size:12px;margin:2px}.btn-secondary{background:#e8eef8!important;color:#082b57!important}.danger{background:#dc2626!important}.hidden{display:none!important}.muted{color:var(--muted);font-size:13px;line-height:1.45}.notice{background:#fff8dd;border:1px solid #f2d77c;border-radius:14px;padding:14px;margin:10px 0;color:#594200}.pill{display:inline-block;background:#e8eef8;color:#082b57;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}.login-page{min-height:100vh;display:grid;place-items:center;position:relative;background:linear-gradient(120deg,rgba(7,23,48,.65),rgba(9,42,90,.38),rgba(230,176,52,.22)),url('assets/login-background.png') center/cover no-repeat}.login-overlay{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 34%),linear-gradient(90deg,rgba(7,26,55,.45),rgba(7,26,55,.12))}.login-card{position:relative;width:min(430px,92vw);background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,0.25);border-radius:26px;padding:30px;box-shadow:0 28px 90px rgba(0,0,0,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.login-card h1{margin:0;color:#082b57;font-size:32px}.login-card p{color:#44536b;margin-bottom:22px}.login-card input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:white}.login-card button{width:100%;margin:12px 0}.login-card small{display:block;color:#667085;line-height:1.4}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,#071a37,#0c254b);color:#fff;padding:20px;position:sticky;top:0;height:100vh;overflow:auto}.brand{font-size:24px;font-weight:950;letter-spacing:.4px;margin-bottom:16px}.brand span{color:var(--gold)}.role-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:12px;border-radius:16px;font-size:13px;margin-bottom:14px;color:#eaf2ff}.sidebar nav{display:grid;gap:7px}.sidebar nav button{background:transparent;text-align:left;border:1px solid rgba(255,255,255,.08);color:#dbeafe;font-weight:750;padding:10px 12px}.sidebar nav button:hover{background:rgba(255,255,255,.10)}.logout{width:100%;margin-top:16px;background:rgba(255,255,255,.12)}.content{padding:24px;overflow:auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.topbar h2{margin:0;color:#0f2444}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.card h3{margin:0 0 12px;color:#0f2444}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.field{display:grid;gap:6px;min-width:0}.field span{font-size:12px;font-weight:800;color:#334155}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:#fff;min-width:0}.field textarea{min-height:82px;resize:vertical}.actions{display:flex;gap:10px;flex-wrap:wrap}.dash-hero{background:linear-gradient(135deg,#0b3f7a,#071a37);color:#fff;border-radius:22px;padding:22px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.dash-hero h2{margin:0 0 6px}.dash-hero p{margin:0;color:#dbeafe}.stats{margin-bottom:16px}.stat{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:18px;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.05)}.stat small{color:#667085;font-weight:800}.stat b{display:block;font-size:34px;color:#082b57;margin-top:5px}table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:12px;overflow:hidden}th,td{text-align:left;border-bottom:1px solid #eef2f7;padding:9px;vertical-align:middle}th{background:#f6f8fb;color:#334155;font-size:12px;text-transform:uppercase}tr:hover td{background:#fafcff}.avatar{width:42px;height:42px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.profile-card{text-align:center}.profile-photo{width:120px;height:140px;object-fit:cover;border-radius:16px;border:4px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.15)}.print-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.print-actions select{padding:10px 12px;border:1px solid var(--line);border-radius:12px;min-width:280px}.bar-chart{display:grid;gap:9px}.bar-item{display:grid;grid-template-columns:82px 1fr 28px;gap:8px;align-items:center;font-size:12px}.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{height:12px;background:#eaf0f8;border-radius:99px;overflow:hidden}.bar-track span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--gold));border-radius:99px}.pie-wrap{display:flex;gap:14px;align-items:center;margin-top:12px}.pie{width:90px;height:90px;border-radius:50%;border:6px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}.pie-legend{display:grid;gap:4px;font-size:12px}.pie-legend span{display:flex;align-items:center;gap:6px}.pie-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* KTA Rev 54 Template - menggunakan background unggahan terbaru */

.rev50-sheet{width:297mm;min-height:210mm;margin:auto;background:#fff;padding:10mm;display:flex;gap:10mm;align-items:flex-start;justify-content:center}

.rev50-card{width:85.6mm;height:53.98mm;position:relative;overflow:hidden;border-radius:3.8mm;background-image:url('assets/kta-template-rev56.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;box-shadow:0 4px 18px rgba(0,0,0,.18);font-family:Arial,Helvetica,sans-serif;color:#082b57}

.rev50-logo{position:absolute;top:4.2mm;width:15mm;height:10mm;display:grid;place-items:center;z-index:2}.rev50-logo img{max-width:100%;max-height:100%;object-fit:contain}.rev50-logo b{font-size:4.6mm;color:#0c3365;letter-spacing:.4mm}.rev50-logo-left{left:6mm}.rev50-logo-right{right:6mm}

.rev50-title{position:absolute;left:22mm;right:22mm;top:4.7mm;text-align:center;z-index:2}.rev50-title h1{margin:0;color:#071a37;font-size:5.8mm;letter-spacing:.32mm;line-height:1;font-weight:950;white-space:nowrap}.rev50-title p{margin:.8mm 0 0;color:#163b67;font-size:1.95mm;line-height:1;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rev50-title strong{display:block;margin:.65mm 0 0;color:#c9141b;font-size:2.25mm;line-height:1;font-weight:950;letter-spacing:.18mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rev50-badge{position:absolute;left:33mm;right:33mm;top:17.1mm;height:5.2mm;border-radius:999px;background:linear-gradient(180deg,#115fb0,#072c63);color:#fff;display:grid;place-items:center;font-size:2.8mm;font-weight:950;letter-spacing:.22mm;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1.2mm 2.4mm rgba(0,0,0,.18);z-index:2}

.rev50-photo{position:absolute;left:7.8mm;top:23.2mm;width:20.5mm;height:25.5mm;border:0.45mm solid #246cae;border-radius:2mm;overflow:hidden;display:grid;place-items:center;color:#6f7f92;background:#eef2f4;font-size:2.5mm;font-weight:900;z-index:2}.rev50-photo img{width:100%;height:100%;object-fit:cover}

.rev50-front-values{position:absolute;left:33mm;top:24.2mm;width:45.2mm;z-index:2}.rev50-row{display:grid;grid-template-columns:15.2mm 2mm 1fr;align-items:center;height:3.35mm;font-size:2.15mm;line-height:1;color:#082b57}.rev50-row b{font-weight:950}.rev50-row span{font-weight:950;text-align:center}.rev50-row strong{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:.12mm solid rgba(8,43,87,.54);padding-bottom:.2mm;min-width:0}

.rev50-front-daerah{position:absolute;left:6.7mm;bottom:3.25mm;width:41mm;color:#fff;font-size:2.35mm;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.42);z-index:2}.rev50-front-no{position:absolute;right:7mm;bottom:3.1mm;width:35mm;text-align:right;color:#fff0a3;font-size:2.35mm;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.42);z-index:2}

.rev50-back-title{top:4.5mm}.rev50-back-badge{top:16.6mm}.rev50-rules{position:absolute;left:7.5mm;top:23mm;width:52mm;color:#082b57;z-index:2}.rev50-rules h2{margin:0 0 1.1mm;font-size:3mm;letter-spacing:.18mm;color:#071a37}.rev50-rules ol{margin:0;padding-left:4.2mm;font-size:2.15mm;line-height:1.22;font-weight:850}.rev50-rules li{margin:.45mm 0}.rev50-qr{position:absolute;right:6.7mm;top:25.3mm;width:15mm;height:18.2mm;background:#fff;border:.5mm solid #0c3d78;border-radius:1.4mm;display:grid;place-items:center;overflow:hidden;z-index:2}.rev50-qr svg{width:12.1mm;height:12.1mm}.rev50-qr em{font-style:normal;font-size:1.75mm;font-weight:950;color:#0c3d78;line-height:1}.rev50-sign{position:absolute;text-align:center;color:#082b57;z-index:2}.rev50-sign-left{left:15.5mm;top:40.2mm;width:19.5mm}.rev50-sign-right{left:50.5mm;top:40.2mm;width:19.5mm}.rev50-sign-title{font-size:2.05mm;font-weight:950;line-height:1.04;margin-bottom:.25mm}.rev50-ttd{height:4.7mm;max-width:18.5mm;object-fit:contain;display:block;margin:0 auto -0.35mm}.rev50-sign-line{height:.16mm;background:#082b57;margin:0 auto .25mm;width:17.5mm}.rev50-sign-name{font-size:1.8mm;line-height:1.05;font-weight:950;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:3.8mm}.rev50-stamp-wrap{position:absolute;left:38mm;top:39.7mm;width:9.5mm;height:9.5mm;display:grid;place-items:center;z-index:3}.rev50-stamp{max-width:9.5mm;max-height:9.5mm;object-fit:contain;opacity:.92}.rev50-back-address{position:absolute;left:7.4mm;bottom:2.25mm;width:70.8mm;color:white;font-size:1.72mm;font-weight:850;line-height:1.08;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 1px 1px rgba(0,0,0,.35);z-index:2}

@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.grid.two{grid-template-columns:1fr}.rev50-sheet{transform:scale(.78);transform-origin:top left;width:380mm}.content{padding:14px}}

@media print{html,body{width:297mm!important;height:210mm!important;background:white!important;overflow:hidden!important}.sidebar,.topbar,.print-actions,.no-print{display:none!important}.app,.content,#view,.card{display:block!important;width:297mm!important;height:auto!important;margin:0!important;padding:0!important;background:white!important;box-shadow:none!important;border:0!important;overflow:hidden!important}.rev50-sheet{width:297mm!important;height:210mm!important;padding:10mm!important;gap:10mm!important;align-items:flex-start!important;justify-content:center!important;page-break-after:avoid!important}.rev50-card{width:85.6mm!important;height:53.98mm!important;box-shadow:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.rev50-title h1{font-size:5.6mm!important}.rev50-row{height:3.35mm!important;font-size:2.05mm!important}.rev50-sign-left{left:15.5mm!important;top:40.2mm!important;width:19.5mm!important}.rev50-sign-right{left:50.5mm!important;top:40.2mm!important;width:19.5mm!important}.rev50-stamp-wrap{left:38mm!important;top:39.7mm!important;width:9.8mm!important;height:9.8mm!important}.rev50-stamp{max-width:9.8mm!important;max-height:9.8mm!important}.rev50-back-address{font-size:1.68mm!important;bottom:2.2mm!important}@page{size:A4 landscape;margin:0}}





/* ===== Online Final Revisi 55: UI shell & Login Rev50 ===== */

:root{--ui-blue:#1267bd;--ui-light:#eff7ff;--ui-deep:#08335f;--ui-gold:#f6c33b;--ui-red:#d61f26}

.login-page{align-items:center;justify-items:center;padding:42px 62px;background-image:linear-gradient(90deg,rgba(4,24,47,.18),rgba(4,24,47,.40)),url('assets/login-background.png');background-position:center;background-size:cover}

.login-card{margin:0 auto;border-top:5px solid var(--ui-gold);width:min(420px,92vw);box-shadow:0 28px 90px rgba(0,0,0,.28)}

.login-logo-container{display:flex;justify-content:center;margin-bottom:20px}

.login-logo-container img{height:80px;width:auto;object-fit:contain}

.login-card h1{font-size:29px;color:var(--ui-deep);text-align:center}

.login-card p{text-align:center}

.login-identity{position:absolute;left:38px;bottom:35px;background:rgba(255,255,255,.92);padding:14px 18px;border-radius:18px;border-left:6px solid var(--ui-gold);box-shadow:0 10px 30px rgba(0,0,0,.18);display:grid;gap:3px;min-width:310px;color:#0c315d}

.identity-logos{display:flex;align-items:center;gap:14px;margin-bottom:6px}.identity-logos img{height:38px;width:80px;object-fit:contain}.identity-logos img:last-child{width:54px}

.login-identity b{font-size:17px}.login-identity span{font-size:12px;font-weight:700;color:#334e70}

.sidebar{background:linear-gradient(180deg,#1267bd,#08417e);padding:16px;color:#fff}

.brand-panel{margin:-16px -16px 16px;padding:14px;background:linear-gradient(135deg,#f7fbff,#e3f2ff);color:#08335f;border-bottom:4px solid var(--ui-gold)}

.brand-logos{display:flex;gap:9px;align-items:center;margin-bottom:8px}.brand-logos img{width:74px;height:42px;object-fit:contain}.brand-logos img:last-child{width:47px}

.brand-panel strong{font-size:15px;display:block}.brand-panel small{font-size:10.5px;font-weight:700;line-height:1.35}

.role-badge{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}

.sidebar nav button{border-color:rgba(255,255,255,.22);color:#fff}.sidebar nav button:hover{background:rgba(255,255,255,.18)}

.dash-hero{background:linear-gradient(120deg,#1f83db,#0e5eae);box-shadow:0 12px 32px rgba(18,103,189,.24)}

.stat{border-left-color:#39a6eb}.topbar h2{color:#08335f}

.tab-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tab-row button.active{background:var(--ui-gold);color:#08335f}

.approval-status{font-weight:800;border-radius:20px;padding:4px 8px;font-size:11px}.approval-pending{background:#fff1c9;color:#835d00}.approval-approved{background:#d6f5e3;color:#116338}.approval-rejected{background:#fee2e2;color:#991b1b}



/* ===== Revisi 55: KTA printable overlay ===== */

.rev50-sheet{box-sizing:border-box;align-items:flex-start}

.rev50-title{left:18.5mm;right:18.5mm;top:5.6mm}

.rev50-title h1{font-size:4.25mm;letter-spacing:.18mm}

.rev50-title p{font-size:1.48mm;margin-top:.62mm}

.rev50-title strong{font-size:1.65mm;margin-top:.58mm}

.rev50-logo{top:3.75mm;width:13.4mm;height:9.2mm}

.rev50-logo-left{left:4.2mm}.rev50-logo-right{right:4.2mm}

.rev50-badge{left:32.5mm;right:32.5mm;top:15.4mm;height:4.4mm;font-size:2.2mm;white-space:nowrap}

.rev50-photo{left:6.2mm;top:22mm;width:19.5mm;height:26mm}

.rev50-front-values{left:29mm;top:22.2mm;width:49.5mm}

.rev50-row{grid-template-columns:13.5mm 2mm 1fr;height:3.35mm;font-size:1.95mm}

.rev50-front .rev50-front-daerah,.rev50-front .rev50-front-no{display:none!important}

.rev50-rules{left:7mm;top:22.5mm;width:53.5mm}

.rev50-rules h2{font-size:2.45mm;margin-bottom:1mm}

.rev50-rules ol{font-size:1.78mm;line-height:1.25;padding-left:4.2mm}

.rev50-rules li{margin:.4mm 0}

.rev50-qr{right:6.5mm;top:25mm;width:13.6mm;height:16mm}

.rev50-qr canvas,.rev50-qr img{width:10.7mm!important;height:10.7mm!important;image-rendering:pixelated}

.rev50-qr em{font-size:1.45mm}

.rev50-sign-left{left:12.3mm;top:39.8mm;width:22mm}

.rev50-sign-right{left:49mm;top:39.8mm;width:22mm}

.rev50-sign-title{font-size:1.72mm}.rev50-ttd{height:4.25mm;max-width:18mm}.rev50-sign-name{font-size:1.45mm;min-height:3mm}

.rev50-stamp-wrap{left:38.55mm;top:39.35mm;width:9.1mm;height:9.1mm}.rev50-stamp{max-width:9.1mm;max-height:9.1mm}

.rev50-back-address{left:10mm;right:10mm;width:auto;bottom:2.35mm;color:#111;text-shadow:none;font-size:1.35mm;font-weight:750;line-height:1.08;text-align:center;display:block;white-space:nowrap;text-overflow:ellipsis}



/* Standard report print view */

.report-table{font-size:12px}.report-table th{background:#eaf4fe;color:#08335f}

.report-print-header{display:none}

@media(max-width:700px){.login-page{justify-items:center;padding:24px}.login-identity{left:16px;right:16px;bottom:16px;min-width:0}.login-card{margin:0 0 148px}}

@media print{

  .rev50-title h1{font-size:4.15mm!important}

  .rev50-title p{font-size:1.45mm!important}

  .rev50-title strong{font-size:1.62mm!important}

  .rev50-front-values{left:29mm!important;top:22.2mm!important;width:49.5mm!important}

  .rev50-row{height:3.28mm!important;font-size:1.9mm!important}

  .rev50-front .rev50-front-daerah,.rev50-front .rev50-front-no{display:none!important}

  .rev50-rules h2{font-size:2.4mm!important}.rev50-rules ol{font-size:1.75mm!important}

  .rev50-back-address{font-size:1.3mm!important;color:#111!important;text-shadow:none!important;text-align:center!important}

  body.report-print .sidebar,body.report-print .topbar,body.report-print .print-actions,body.report-print .grid.stats,body.report-print .grid.two{display:none!important}

  body.report-print #view .card:last-child{display:block!important;width:275mm!important;margin:8mm auto!important}

  body.report-print #view .card:last-child h3{font-size:18pt!important;margin-bottom:10mm!important}

  body.report-print table{font-size:10pt!important}

}





/* ===== Revisi 56: KTA template alignment update ===== */

.rev50-card{background-image:url('assets/kta-template-rev56.png')!important;background-size:100% 100%!important;}

.rev50-logo{top:6.7mm!important;width:12.2mm!important;height:8.6mm!important}

.rev50-logo-left{left:8.0mm!important}.rev50-logo-right{right:8.0mm!important}

.rev50-title{left:17mm!important;right:17mm!important;top:9.8mm!important;text-align:center!important}

.rev50-title h1{font-size:3.45mm!important;letter-spacing:.10mm!important;line-height:1.02!important;white-space:normal!important}

.rev50-title p{font-size:1.28mm!important;line-height:1.12!important;margin-top:.8mm!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

.rev50-title strong{font-size:1.45mm!important;line-height:1.12!important;margin-top:.55mm!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

.rev50-badge{left:31mm!important;right:31mm!important;top:18.8mm!important;height:3.7mm!important;font-size:1.95mm!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}

.rev50-photo{left:8.5mm!important;top:24.3mm!important;width:18.8mm!important;height:24.6mm!important;border-radius:2.2mm!important}

.rev50-front-values{left:31.4mm!important;top:25.0mm!important;width:44.8mm!important}

.rev50-row{grid-template-columns:12.2mm 1.8mm 1fr!important;height:3.05mm!important;font-size:1.72mm!important}

.rev50-row strong{padding-bottom:.15mm!important}

.rev50-back-title{top:9.8mm!important}

.rev50-back-badge{top:18.8mm!important}

.rev50-rules{left:8.0mm!important;top:24.6mm!important;width:49.5mm!important}

.rev50-rules h2{font-size:2.05mm!important;margin:0 0 .7mm!important}

.rev50-rules ol{font-size:1.52mm!important;line-height:1.16!important;padding-left:3.7mm!important}

.rev50-rules li{margin:.25mm 0!important}

.rev50-qr{right:7.4mm!important;top:26.6mm!important;width:12.3mm!important;height:14.4mm!important;padding:.5mm!important;grid-template-rows:1fr auto!important}

.rev50-qr img{display:block;width:9.5mm!important;height:9.5mm!important;object-fit:contain!important}

.rev50-qr em{font-size:1.18mm!important;letter-spacing:.02mm!important}

.rev50-sign-left{left:15.2mm!important;top:40.8mm!important;width:18mm!important}

.rev50-sign-right{left:50.6mm!important;top:40.8mm!important;width:18mm!important}

.rev50-sign-title{font-size:1.56mm!important;margin-bottom:.2mm!important}

.rev50-ttd{height:3.8mm!important;max-width:16.8mm!important}

.rev50-sign-line{width:16.5mm!important}.rev50-sign-name{font-size:1.32mm!important;min-height:2.7mm!important;line-height:1.02!important}

.rev50-stamp-wrap{left:39.3mm!important;top:40.0mm!important;width:8.6mm!important;height:8.6mm!important}

.rev50-stamp{max-width:8.6mm!important;max-height:8.6mm!important}

.rev50-back-address{left:10mm!important;right:10mm!important;bottom:2.0mm!important;width:auto!important;color:#111!important;font-size:1.22mm!important;line-height:1.05!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:none!important}

@media print{

  .rev50-title{top:9.8mm!important}

  .rev50-title h1{font-size:3.35mm!important}

  .rev50-title p{font-size:1.24mm!important}

  .rev50-title strong{font-size:1.42mm!important}

  .rev50-badge{top:18.8mm!important;height:3.7mm!important;font-size:1.9mm!important}

  .rev50-front-values{left:31.4mm!important;top:25.0mm!important;width:44.8mm!important}

  .rev50-row{font-size:1.68mm!important;height:3.00mm!important}

  .rev50-rules{top:24.6mm!important;width:49.5mm!important}

  .rev50-rules h2{font-size:2.0mm!important}

  .rev50-rules ol{font-size:1.48mm!important}

  .rev50-qr{top:26.6mm!important;width:12.3mm!important;height:14.4mm!important}

  .rev50-qr img{width:9.5mm!important;height:9.5mm!important}

}





/* ===== Revisi 57: clean identity, filters & mass print ===== */

.login-identity{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;padding:0!important;text-shadow:0 2px 7px rgba(0,0,0,.48)}

.login-identity span{color:#fff!important}.identity-logos img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.3));object-fit:contain!important;background:transparent!important}

.brand-panel{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.28)!important;color:#fff!important}

.brand-panel small,.brand-panel strong{color:#fff!important}.brand-logos img{background:transparent!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}

.section-header{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}.section-header h3{margin:0!important}.search-box{display:flex;align-items:center;gap:10px;min-width:min(460px,60vw)}.search-box input,.search-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff}.search-box span{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:700}

.report-control,.kta-control{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}.inline-field{min-width:280px}.toolbar-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,240px) minmax(260px,1fr);gap:10px;flex:1}.toolbar-grid select{padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}

@media(max-width:980px){.section-header{display:block}.search-box{margin-top:10px;min-width:0}.toolbar-grid{grid-template-columns:1fr}}

@media print{body.print-kta-batch .rev50-sheet{page-break-after:always!important;break-after:page!important} body.print-kta-batch .rev50-sheet:last-child{page-break-after:avoid!important;break-after:avoid!important}}





/* ===== Revisi 58: penyempurnaan posisi header, logo, ketentuan dan QR ===== */

.rev50-logo{top:4.0mm!important;width:12.2mm!important;height:8.1mm!important}

.rev50-logo-left{left:8.0mm!important}.rev50-logo-right{right:8.0mm!important}

.rev50-title{left:16mm!important;right:16mm!important;top:8.7mm!important;text-align:center!important}

.rev50-title h1{font-size:2.85mm!important;letter-spacing:.06mm!important;line-height:1.04!important;white-space:nowrap!important;overflow:visible!important}

.rev50-title p{font-size:1.16mm!important;line-height:1.12!important;margin-top:.65mm!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

.rev50-title strong{font-size:1.30mm!important;line-height:1.12!important;margin-top:.50mm!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

.rev50-badge{left:31.5mm!important;right:31.5mm!important;top:16.7mm!important;height:3.55mm!important;font-size:1.78mm!important;letter-spacing:.08mm!important}

.rev50-photo{top:22.4mm!important}

.rev50-front-values{top:23.2mm!important}

.rev50-back-title{top:8.7mm!important}

.rev50-back-badge{top:16.7mm!important}

.rev50-rules{left:8.0mm!important;top:21.8mm!important;width:49.2mm!important}

.rev50-rules h2{font-size:1.78mm!important;margin:0 0 .58mm!important;letter-spacing:.08mm!important}

.rev50-rules ol{font-size:1.37mm!important;line-height:1.13!important;padding-left:3.5mm!important}

.rev50-rules li{margin:.19mm 0!important}

.rev50-qr{right:7.2mm!important;top:23.1mm!important;width:12.8mm!important;height:15.2mm!important;background:#fff!important;z-index:5!important;display:grid!important;grid-template-rows:1fr auto!important;padding:.5mm!important}

.rev50-qr img{display:block!important;width:10.3mm!important;height:10.3mm!important;object-fit:contain!important;visibility:visible!important;opacity:1!important}

.rev50-qr em{font-size:1.12mm!important;color:#0c3d78!important}

.rev50-sign-left{top:38.6mm!important}.rev50-sign-right{top:38.6mm!important}.rev50-stamp-wrap{top:38.3mm!important}

@media print{

  .rev50-logo{top:4.0mm!important;width:12.2mm!important;height:8.1mm!important}

  .rev50-title{top:8.7mm!important}

  .rev50-title h1{font-size:2.82mm!important;white-space:nowrap!important}

  .rev50-title p{font-size:1.13mm!important;white-space:nowrap!important}

  .rev50-title strong{font-size:1.27mm!important;white-space:nowrap!important}

  .rev50-badge{top:16.7mm!important;height:3.55mm!important;font-size:1.76mm!important}

  .rev50-rules{top:21.8mm!important}.rev50-rules h2{font-size:1.76mm!important}.rev50-rules ol{font-size:1.34mm!important}

  .rev50-qr{top:23.1mm!important;width:12.8mm!important;height:15.2mm!important}

  .rev50-qr img{width:10.3mm!important;height:10.3mm!important}

  .rev50-sign-left,.rev50-sign-right{top:38.6mm!important}.rev50-stamp-wrap{top:38.3mm!important}

}





/* ===== Revisi 59: identity panel blocks with transparent-only logos ===== */

.login-identity{background:rgba(255,255,255,.94)!important;border:1px solid rgba(255,255,255,.75)!important;border-left:6px solid var(--ui-gold)!important;box-shadow:0 12px 32px rgba(0,0,0,.20)!important;color:#0c315d!important;padding:14px 18px!important;text-shadow:none!important}

.login-identity span{color:#334e70!important}

.identity-logos img{background:transparent!important;filter:drop-shadow(0 2px 3px rgba(8,43,87,.14))!important}

.brand-panel{background:linear-gradient(135deg,#f8fcff,#e7f3ff)!important;border-bottom:4px solid var(--ui-gold)!important;color:#08335f!important}

.brand-panel small,.brand-panel strong{color:#08335f!important}

.brand-logos img{background:transparent!important;filter:drop-shadow(0 2px 2px rgba(8,43,87,.14))!important}





/* ===== Revisi 60: panel transparan & logo unggahan resmi ===== */

.login-identity{

  background:rgba(255,255,255,.92)!important;

  border:1px solid rgba(255,255,255,.8)!important;

  border-left:5px solid var(--ui-gold)!important;

  box-shadow:0 14px 38px rgba(0,0,0,.15)!important;

  backdrop-filter:none!important;

  -webkit-backdrop-filter:none!important;

  color:#0c315d!important;

}

.login-identity b{color:#0c315d!important;text-shadow:none!important}

.login-identity span{color:#334e70!important;text-shadow:none!important}

.identity-logos img{object-fit:contain!important;background:transparent!important;filter:drop-shadow(0 2px 3px rgba(8,43,87,.14))!important}

.brand-panel{

  background:rgba(255,255,255,.12)!important;

  border:1px solid rgba(255,255,255,.22)!important;

  border-bottom:3px solid var(--ui-gold)!important;

  border-radius:14px!important;

  margin:0 0 16px!important;

  padding:13px!important;

  backdrop-filter:blur(6px)!important;

  -webkit-backdrop-filter:blur(6px)!important;

  color:#fff!important;

}

.brand-panel strong,.brand-panel small{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.20)!important}

.brand-logos img{object-fit:contain!important;background:transparent!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))!important}



/* ===== Revisi 61: rapatkan area tanda tangan belakang KTA ===== */

.rev50-sign-left{

  left:17.4mm!important;

  width:18mm!important;

}

.rev50-sign-right{

  left:48.6mm!important;

  width:18mm!important;

}

.rev50-stamp-wrap{

  left:38.5mm!important;

}

@media print{

  .rev50-sign-left{

    left:17.4mm!important;

    width:18mm!important;

  }

  .rev50-sign-right{

    left:48.6mm!important;

    width:18mm!important;

  }

  .rev50-stamp-wrap{

    left:38.5mm!important;

  }

}



/* ===== Revisi 62: hasil print KTA hanya kartu depan-belakang ===== */

@media print{

  body.print-kta-single,

  body.print-kta-batch{

    width:297mm!important;

    height:auto!important;

    margin:0!important;

    padding:0!important;

    background:#fff!important;

    overflow:visible!important;

  }



  body.print-kta-single #loginPage,

  body.print-kta-batch #loginPage,

  body.print-kta-single .sidebar,

  body.print-kta-batch .sidebar,

  body.print-kta-single .topbar,

  body.print-kta-batch .topbar,

  body.print-kta-single #view > *:not(#ktaPreview),

  body.print-kta-batch #view > *:not(#ktaPreview){

    display:none!important;

  }



  body.print-kta-single .app,

  body.print-kta-batch .app,

  body.print-kta-single .content,

  body.print-kta-batch .content,

  body.print-kta-single #view,

  body.print-kta-batch #view{

    display:block!important;

    width:297mm!important;

    height:auto!important;

    min-height:0!important;

    margin:0!important;

    padding:0!important;

    background:#fff!important;

    overflow:visible!important;

  }



  body.print-kta-single #ktaPreview,

  body.print-kta-batch #ktaPreview{

    display:block!important;

    position:static!important;

    width:297mm!important;

    margin:0!important;

    padding:0!important;

    background:#fff!important;

  }



  body.print-kta-single #ktaPreview .rev50-sheet{

    display:flex!important;

    width:297mm!important;

    height:210mm!important;

    min-height:210mm!important;

    margin:0!important;

    padding:16mm 10mm!important;

    gap:10mm!important;

    justify-content:center!important;

    align-items:flex-start!important;

    page-break-after:avoid!important;

    break-after:avoid!important;

  }



  body.print-kta-batch #ktaPreview .rev50-sheet{

    display:flex!important;

    width:297mm!important;

    height:210mm!important;

    min-height:210mm!important;

    margin:0!important;

    padding:16mm 10mm!important;

    gap:10mm!important;

    justify-content:center!important;

    align-items:flex-start!important;

    page-break-after:always!important;

    break-after:page!important;

  }



  body.print-kta-batch #ktaPreview .rev50-sheet:last-child{

    page-break-after:avoid!important;

    break-after:avoid!important;

  }



  body.print-kta-single .rev50-card,

  body.print-kta-batch .rev50-card{

    flex:none!important;

    -webkit-print-color-adjust:exact!important;

    print-color-adjust:exact!important;

  }



  @page{

    size:A4 landscape;

    margin:0;

  }

}



/* ===== Revisi 63: identitas daerah yang sedang login ===== */

.role-badge .sidebar-identity-label{

  display:block;

  font-size:9.5px;

  font-weight:800;

  letter-spacing:.12em;

  color:rgba(255,255,255,.76);

  margin-bottom:6px;

}

.role-badge b{

  display:block;

  font-size:14px;

  line-height:1.28;

  color:#fff;

  margin-bottom:3px;

}

.role-badge span{

  font-size:11px;

  color:rgba(255,255,255,.88);

  line-height:1.28;

  word-break:break-word;

}



/* ===== Revisi 64: tombol pengaturan urutan otomatis ===== */

button:disabled{

  opacity:.42;

  cursor:not-allowed;

  filter:none!important;

}



/* ===== Revisi 65: notifikasi dan ringkasan approval ===== */

.stat.pending-stat{border-left-color:#f59e0b;background:#fffcf4}

.stat.approved-stat{border-left-color:#16a34a;background:#f5fff8}

.notification-card{border-top:4px solid #f6c33b}

.notification-card .section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}

.notify-list{display:grid;gap:8px;margin-top:12px}

.notify-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#fbfdff}

.notify-row.unread{border-left:4px solid #f59e0b;background:#fffaf0}

.notify-row div{display:grid;gap:3px}

.notify-row div b{font-size:13px;color:#08335f}

.notify-row div span{font-size:12px;color:#64748b}

.approval-status.approval-pending{background:#fff1c9;color:#835d00}

.approval-status.approval-approved{background:#d6f5e3;color:#116338}

.approval-status.approval-rejected{background:#fee2e2;color:#991b1b}





/* ===== Revisi 66: Copyright footer login dan sidebar dashboard ===== */

.login-identity{top:35px!important;bottom:auto!important;}

.login-copyright{

  position:absolute;

  left:38px;

  bottom:22px;

  z-index:2;

  font-size:12px;

  font-weight:700;

  letter-spacing:.02em;

  color:rgba(255,255,255,.92);

  text-shadow:0 1px 5px rgba(0,0,0,.48);

}

.sidebar{display:flex!important;flex-direction:column!important;}

.sidebar nav{flex:0 0 auto;}

.sidebar-copyright{

  margin-top:auto;

  padding:18px 4px 4px;

  text-align:left;

  font-size:11px;

  font-weight:700;

  color:rgba(255,255,255,.78);

  letter-spacing:.02em;

}

@media(max-width:700px){

  .login-identity{bottom:50px!important;}

  .login-copyright{left:16px;bottom:18px;font-size:11px;}

}

@media print{

  .login-copyright,.sidebar-copyright{display:none!important;}

}



/* ===== Revisi 67: Copyright center pada login dan dashboard ===== */

.login-copyright{

  left:0!important;

  right:0!important;

  width:100%!important;

  text-align:center!important;

  padding:0 16px!important;

  margin:0!important;

}

.sidebar-copyright{

  display:block!important;

  width:100%!important;

  text-align:center!important;

  padding:18px 0 4px!important;

  margin-left:auto!important;

  margin-right:auto!important;

}

@media(max-width:700px){

  .login-copyright{

    left:0!important;

    right:0!important;

    width:100%!important;

    text-align:center!important;

    padding:0 12px!important;

  }

}

@media print{

  .login-copyright,.sidebar-copyright{display:none!important;}

}



/* ===== Revisi 68: Ikon notifikasi dashboard dengan badge merah ===== */

.topbar-actions{

  display:flex;

  align-items:center;

  gap:10px;

}

.notification-shell{

  position:relative;

}

.notification-button{

  width:46px;

  height:46px;

  padding:0!important;

  border-radius:14px!important;

  display:grid;

  place-items:center;

  position:relative;

  background:#fff!important;

  color:#08335f!important;

  border:1px solid #d7e4f3!important;

  box-shadow:0 4px 14px rgba(8,51,95,.08);

}

.notification-button:hover{

  background:#edf6ff!important;

}

.notification-button.has-alert{

  border-color:#efbac0!important;

}

.bell-icon{

  font-size:20px;

  line-height:1;

}

.notification-count{

  position:absolute;

  top:-6px;

  right:-6px;

  min-width:20px;

  height:20px;

  padding:0 5px;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#dc2626;

  color:#fff;

  font-size:11px;

  font-weight:900;

  border:2px solid #fff;

}

.notification-panel{

  position:absolute;

  top:54px;

  right:0;

  width:min(360px,85vw);

  background:#fff;

  border:1px solid #d9e2ef;

  border-radius:16px;

  box-shadow:0 18px 44px rgba(15,23,42,.18);

  z-index:100;

  overflow:hidden;

}

.notification-panel-head{

  padding:13px 15px;

  background:#edf6ff;

  color:#08335f;

  border-bottom:1px solid #d9e2ef;

}

.notification-panel-body{

  max-height:330px;

  overflow-y:auto;

  padding:8px;

}

.notification-item{

  padding:10px;

  margin:4px 0;

  border-radius:11px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:8px;

  background:#f8fbff;

  border:1px solid #eef3f9;

}

.notification-item.pending{

  border-left:4px solid #dc2626;

  background:#fff8f8;

}

.notification-item div{

  display:grid;

  gap:3px;

  min-width:0;

}

.notification-item b{

  font-size:12px;

  color:#08335f;

}

.notification-item div span{

  font-size:11px;

  color:#64748b;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}

.notification-empty{

  padding:12px 8px;

  margin:0;

}

.notification-link{

  width:100%;

  border-radius:0!important;

  padding:12px!important;

}

@media(max-width:700px){

  .topbar{align-items:flex-start;gap:12px;}

  .topbar-actions{flex-shrink:0;}

}

@media print{

  .notification-shell{display:none!important;}

}



.verify-card{background:#f5faff;border:1px solid #d9e8fb;border-radius:14px;padding:14px;margin-top:14px}.verify-card p{margin:7px 0;color:#12345d}



/* ===== Revisi 70: status aktif/nonaktif Admin Daerah ===== */

.admin-status{

  display:inline-flex;

  align-items:center;

  padding:5px 10px;

  border-radius:999px;

  font-size:11px;

  font-weight:900;

}

.admin-active{background:#dcfce7;color:#166534}

.admin-inactive{background:#fee2e2;color:#991b1b}

button.admin-enable{background:#16a34a!important;color:#fff!important}



/* ===== Revisi 71: login pertama wajib ganti password ===== */

.password-change-page{

  min-height:100vh;

  display:grid;

  place-items:center;

  padding:24px;

  background:linear-gradient(120deg,rgba(7,23,48,.48),rgba(9,42,90,.34)),url('assets/login-background.png') center/cover no-repeat;

}

.password-change-card{

  width:min(470px,94vw);

  background:rgba(255,255,255,.97);

  border-radius:24px;

  padding:28px;

  border-top:5px solid var(--ui-gold);

  box-shadow:0 22px 60px rgba(0,0,0,.28);

}

.password-logo-row{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:18px;

  margin-bottom:12px;

}

.password-logo-row img:first-child{height:54px;width:110px;object-fit:contain}

.password-logo-row img:last-child{height:54px;width:68px;object-fit:contain}

.password-change-card h1{

  margin:0 0 8px;

  text-align:center;

  color:#08335f;

}

.password-change-card p{

  color:#475569;

  font-size:13px;

  line-height:1.5;

  text-align:center;

  margin:0 0 18px;

}

.password-change-card input{

  width:100%;

  padding:12px 13px;

  border:1px solid var(--line);

  border-radius:12px;

  background:#fff;

}

.password-change-card button{

  width:100%;

  margin-top:14px;

}

.password-policy{

  margin-top:10px;

  padding:10px 12px;

  background:#edf6ff;

  border-radius:10px;

  font-size:12px;

  color:#334e70;

}

.password-logout{margin-top:8px!important}



/* ===== Revisi 71: pagination seluruh daftar/tabel ===== */

.table-pagination{

  display:flex;

  align-items:center;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:10px;

  padding:12px 2px 2px;

  font-size:12px;

  color:#526176;

}

.page-size-control label{

  display:flex;

  align-items:center;

  gap:7px;

  font-weight:700;

}

.page-size-control select{

  padding:6px 9px;

  border:1px solid var(--line);

  border-radius:8px;

  background:#fff;

}

.page-info{

  font-weight:700;

  color:#334155;

}

.page-actions{

  display:flex;

  gap:6px;

}

@media(max-width:700px){

  .table-pagination{flex-direction:column;align-items:flex-start}

}

@media print{

  .password-change-page,.table-pagination{display:none!important}

}



/* ===== Revisi 72: Persetujuan aman, profil view, dan arsip ===== */

.approval-toolbar .section-header{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:14px;

  flex-wrap:wrap;

  margin-bottom:14px;

}

.approval-switch{

  display:flex;

  gap:6px;

}

.approval-switch button{

  background:#edf4fc!important;

  color:#08335f!important;

}

.approval-switch button.active{

  background:#1267bd!important;

  color:#fff!important;

}

.approval-bulk-actions{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:8px;

  padding:12px;

  background:#f5f9fe;

  border:1px solid #e2ecf7;

  border-radius:13px;

  margin:10px 0 16px;

}

.select-all-request{

  margin-right:8px;

  display:flex;

  gap:6px;

  align-items:center;

  font-size:12px;

  font-weight:800;

  color:#334155;

}

.approval-actions{white-space:nowrap}

.approval-archived{background:#e5e7eb;color:#374151}

.modal-shell{

  position:fixed;

  inset:0;

  z-index:400;

  display:grid;

  place-items:center;

  padding:18px;

  background:rgba(2,12,27,.58);

}

.modal-card{

  width:min(790px,96vw);

  max-height:92vh;

  overflow:auto;

  background:#fff;

  border-radius:20px;

  padding:18px;

  box-shadow:0 26px 70px rgba(0,0,0,.28);

}

.modal-head{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding-bottom:12px;

  border-bottom:1px solid #e6edf6;

}

.modal-head h3{margin:0;color:#08335f}

.modal-close{

  font-size:26px;

  line-height:1;

  padding:0!important;

  width:38px;

  height:38px;

  background:#edf4fc!important;

  color:#08335f!important;

}

.request-meta{

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:8px;

  margin:14px 0;

  font-size:12px;

  color:#526176;

}

.request-profile-grid{

  display:grid;

  grid-template-columns:170px 1fr;

  gap:18px;

}

.request-photo{

  height:215px;

  border-radius:14px;

  border:1px solid #d9e2ef;

  background:#f5f7fb;

  display:grid;

  place-items:center;

  overflow:hidden;

  color:#667085;

  font-size:12px;

}

.request-photo img{width:100%;height:100%;object-fit:cover}

.profile-detail-list{display:grid;gap:6px}

.profile-read-row{

  display:grid;

  grid-template-columns:115px 10px 1fr;

  gap:6px;

  font-size:13px;

  line-height:1.35;

  border-bottom:1px dashed #e2e8f0;

  padding-bottom:5px;

}

.profile-read-row b{color:#526176}

.profile-read-row strong{color:#0f2444;word-break:break-word}

.pending-kta{

  display:inline-block;

  background:#fff1c9;

  color:#835d00;

  border-radius:999px;

  padding:3px 8px;

  font-size:11px;

}

.modal-actions{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  justify-content:flex-end;

  border-top:1px solid #e6edf6;

  padding-top:14px;

  margin-top:16px;

}

@media(max-width:700px){

  .request-profile-grid{grid-template-columns:1fr}

  .request-photo{width:150px;height:190px;margin:auto}

  .profile-read-row{grid-template-columns:98px 8px 1fr;font-size:12px}

}

@media print{

  .modal-shell,.approval-bulk-actions{display:none!important}

}



/* ===== Revisi 73: Ulang Tahun & WhatsApp ===== */

.birthday-summary-card{border-top:4px solid #f59e0b;background:linear-gradient(135deg,#fffdf7,#fff)}

.birthday-summary-card .section-header,.birthday-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

.birthday-hero{border-top:4px solid #f59e0b}

.birthday-hero h3{font-size:19px}

.checkbox-field{align-content:start}

.consent-line{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fff;line-height:1.35;font-size:12px;color:#334155}

.consent-line input{width:auto;margin-top:1px}

@media print{.birthday-summary-card,.birthday-hero{display:none!important}}



/* ===== Revisi 74: Aktivasi Mandiri Anggota via Magic Link ===== */

.btn-activation{

  background:linear-gradient(135deg,#f6c33b,#dca51a)!important;

  color:#08335f!important;

  margin-top:4px!important;

}

.btn-magic-login{

  background:#edf6ff!important;

  color:#08335f!important;

  border:1px solid #d5e5f7!important;

  margin-top:5px!important;

}

.activation-modal{

  position:fixed;

  top:0;

  left:0;

  right:0;

  bottom:0;

  z-index:500;

  background:rgba(3,17,36,.64);

  display:grid;

  place-items:center;

  padding:18px;

}

.activation-card{

  position:relative;

  width:min(470px,96vw);

  background:#fff;

  border-radius:20px;

  border-top:5px solid var(--ui-gold);

  padding:26px 24px 22px;

  box-shadow:0 25px 70px rgba(0,0,0,.3);

}

.activation-card h2{

  margin:0 0 8px;

  color:#08335f;

}

.activation-card p{

  color:#526176;

  font-size:13px;

  line-height:1.45;

}

.activation-card input{

  width:100%;

  padding:11px 12px;

  border:1px solid var(--line);

  border-radius:10px;

  background:#fff;

}

.activation-card button[type="submit"]{

  width:100%;

  margin-top:16px;

}

.activation-close{

  position:absolute;

  right:12px;

  top:12px;

  width:36px;

  height:36px;

  padding:0!important;

  border-radius:999px!important;

  background:#edf6ff!important;

  color:#08335f!important;

  font-size:25px;

  line-height:1;

}

.activation-security-note{

  margin:14px 0 0!important;

  padding:10px 12px;

  border-radius:10px;

  background:#f5f9fe;

  font-size:11.5px!important;

}

@media print{

  .activation-modal{display:none!important}

}



/* ===== Revisi 77: Tampilan Login Center & Responsive di Handphone ===== */

.login-page{

  min-height:100dvh;

}



/* Smartphone portrait/tablet kecil:

   form, blok identitas, dan copyright menjadi satu susunan rapi di tengah.

   Posisi absolute lama dinonaktifkan agar tampilan tidak bergeser. */

@media (max-width:700px){

  .login-page{

    min-height:100dvh!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:center!important;

    gap:10px!important;

    padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;

    overflow-y:auto!important;

    background-position:center center!important;

  }

  @media (min-height:580px) {

    .login-page {

      height: 100dvh!important;

      max-height: 100dvh!important;

      overflow-y: hidden!important;

    }

  }

  .login-overlay{

    position:fixed!important;

  }

  .login-card{

    position:relative!important;

    z-index:2!important;

    width:min(100%,420px)!important;

    margin:0 auto!important;

    padding:18px 18px 14px!important;

    border-radius:24px!important;

    flex:0 0 auto!important;

  }

  .login-card h1{

    font-size:clamp(22px,6.5vw,25px)!important;

    line-height:1.16!important;

    letter-spacing:-.02em!important;

  }

  .login-card p{

    font-size:13px!important;

    line-height:1.35!important;

    margin:8px 0 10px!important;

  }

  .login-card input{

    padding:10px 12px!important;

    margin:4px 0!important;

  }

  .login-card button{

    margin:6px 0!important;

    padding:10px 12px!important;

    font-size:13.5px!important;

  }

  .login-card small{

    margin-top:8px!important;

    font-size:11px!important;

  }

  .login-identity{

    position:relative!important;

    left:auto!important;

    right:auto!important;

    bottom:auto!important;

    z-index:2!important;

    width:min(100%,420px)!important;

    min-width:0!important;

    margin:0 auto!important;

    padding:10px 12px!important;

    border-radius:18px!important;

    flex:0 0 auto!important;

  }

  .identity-logos{

    gap:10px!important;

    margin-bottom:4px!important;

  }

  .identity-logos img:first-child{

    height:28px!important;

    width:auto!important;

    max-width:85px!important;

  }

  .identity-logos img:last-child{

    height:32px!important;

    width:auto!important;

    max-width:50px!important;

  }

  .login-identity b{

    font-size:13px!important;

    line-height:1.25!important;

  }

  .login-identity span{

    font-size:11px!important;

    line-height:1.25!important;

  }

  .login-copyright{

    position:relative!important;

    left:auto!important;

    right:auto!important;

    bottom:auto!important;

    z-index:2!important;

    display:block!important;

    width:min(100%,420px)!important;

    margin:0 auto!important;

    padding:2px 0 0!important;

    text-align:center!important;

    font-size:11px!important;

  }

  .member-login-help{

    font-size:11px!important;

    margin:6px 0 0!important;

    line-height:1.3!important;

  }

}



/* Pada HP dengan tinggi layar lebih pendek, konten dapat discroll tanpa terpotong. */

@media (max-width:700px) and (max-height:580px){

  .login-page{

    justify-content:flex-start!important;

    padding-top:16px!important;

  }

  .login-card{

    padding:14px 15px 12px!important;

  }

  .login-card p{

    margin:6px 0 8px!important;

  }

  .login-identity{

    padding:8px 10px!important;

  }

}



/* Ponsel sempit: jarak dan tulisan tetap proporsional. */

@media (max-width:380px){

  .login-page{padding-left:12px!important;padding-right:12px!important;gap:8px!important}

  .login-card{padding:16px 14px 12px!important}

  .login-card h1{font-size:21px!important}

  .login-card p{font-size:12.5px!important}

  .login-identity b{font-size:12.5px!important}

}



/* ===== Revisi 78: login hidden fix + Dashboard Anggota setelah Magic Link ===== */

/* Fix utama: aturan responsive Revisi 77 memakai display:flex!important.

   Saat sesi login aktif, class hidden harus tetap menang agar form login hilang. */

.login-page.hidden,

.activation-modal.hidden,

.password-change-page.hidden{

  display:none!important;

}

.member-welcome{

  background:linear-gradient(135deg,#1267bd,#08335f);

  color:#fff;

  border-radius:22px;

  padding:22px;

  margin-bottom:16px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

}

.member-welcome small{font-size:11px;font-weight:900;letter-spacing:.13em;color:#dbeafe}

.member-welcome h2{margin:6px 0;color:#fff}

.member-welcome p{margin:0;color:#e1efff}

.member-status{

  padding:8px 13px;border-radius:999px;background:#d6f5e3;color:#116338;

  font-weight:900;font-size:12px;

}

.member-kta-number{font-size:23px!important;letter-spacing:.03em}

.member-unit{font-size:18px!important}

.member-actions{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:900px){

  .app.member-app{display:flex!important;flex-direction:column!important;min-height:100dvh!important}

  .app.member-app .content{order:1!important;padding:14px!important}

  .app.member-app .sidebar{order:2!important;position:relative!important;height:auto!important;min-height:auto!important;margin-top:10px!important}

  .app.member-app .topbar{margin-bottom:12px!important}

  .app.member-app .topbar #pageTitle{font-size:22px!important}

  .member-welcome{flex-direction:column!important;align-items:flex-start!important;padding:18px!important}

  .member-actions button{flex:1 1 100%!important}

}



/* ===== Revisi 79: Paksa Login Hilang & Aktifkan Interaksi Dashboard Anggota ===== */

body.session-authenticated #loginPage{

  display:none!important;

  visibility:hidden!important;

  opacity:0!important;

  pointer-events:none!important;

  height:0!important;

  min-height:0!important;

  width:0!important;

  overflow:hidden!important;

  position:fixed!important;

  z-index:-1!important;

}

body.session-authenticated #app:not(.hidden){

  display:grid!important;

  pointer-events:auto!important;

  position:relative!important;

  z-index:2!important;

}

/* ===== Revisi 89: Notifikasi Sistem Tampil di Atas Halaman ===== */

.app-toast{

  position:fixed;

  top:max(18px,calc(env(safe-area-inset-top) + 12px));

  left:50%;

  bottom:auto;

  transform:translateX(-50%);

  z-index:9999;

  width:max-content;

  max-width:min(460px,calc(100vw - 28px));

  padding:13px 16px;

  border-radius:14px;

  background:#08335f;

  color:#fff;

  font-size:13px;

  font-weight:700;

  text-align:center;

  line-height:1.4;

  box-shadow:0 16px 42px rgba(0,0,0,.25);

  opacity:1;

  pointer-events:none;

  transition:opacity .3s ease,transform .3s ease;

}

.app-toast-hide{

  opacity:0;

  transform:translate(-50%,-14px);

}

@media screen and (max-width:700px){

  .app-toast{

    top:max(12px,calc(env(safe-area-inset-top) + 10px));

    width:calc(100vw - 28px);

    max-width:420px;

    padding:12px 14px;

    font-size:13px;

    border-radius:13px;

  }

}

.member-actions{position:relative;z-index:3}

.member-actions button{

  position:relative;

  z-index:3;

  touch-action:manipulation;

  -webkit-tap-highlight-color:transparent;

}

@media(max-width:900px){

  body.session-authenticated #app.member-app:not(.hidden){

    display:flex!important;

    flex-direction:column!important;

    min-height:100dvh!important;

  }

  .member-actions button{

    min-height:48px!important;

  }

}



/* ===== Revisi 80: Kartu Anggota responsive mobile & Ubah Password Anggota ===== */

.member-password-button{

  border:1px solid #d5e5f7!important;

}

.member-password-card{

  max-width:680px;

}

.password-form-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:14px;

  margin-top:14px;

}

.member-password-policy{

  margin-top:14px;

  max-width:100%;

}

.member-password-actions{

  margin-top:16px;

}



/* Tampilan kartu hanya di layar handphone anggota.

   Ukuran kartu cetak/PDF tetap mengikuti ukuran fisik KTA. */

@media screen and (max-width:700px){

  body.session-authenticated #app.member-app .content{

    padding:10px!important;

  }

  body.session-authenticated #app.member-app .kta-control{

    padding:12px!important;

    margin-bottom:12px!important;

  }

  body.session-authenticated #app.member-app .kta-control .toolbar-grid{

    grid-template-columns:1fr!important;

  }

  body.session-authenticated #app.member-app .kta-control .search-input,

  body.session-authenticated #app.member-app .kta-control select{

    display:none!important;

  }

  body.session-authenticated #app.member-app .kta-control .actions{

    width:100%!important;

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

    gap:8px!important;

  }

  body.session-authenticated #app.member-app .kta-control .actions button{

    padding:11px 7px!important;

    font-size:12px!important;

  }

  body.session-authenticated #app.member-app #ktaPreview{

    width:100%!important;

    overflow:hidden!important;

    background:transparent!important;

  }

  body.session-authenticated #app.member-app #ktaPreview .rev50-sheet.member-mobile-kta-sheet{

    width:100%!important;

    min-height:0!important;

    height:auto!important;

    padding:4px 0 18px!important;

    margin:0!important;

    background:transparent!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    gap:14px!important;

    transform:none!important;

    overflow:visible!important;

  }

  body.session-authenticated #app.member-app #ktaPreview .rev50-sheet.member-mobile-kta-sheet .rev50-card{

    flex:0 0 auto!important;

    transform-origin:top center!important;

  }

  .password-form-grid{

    grid-template-columns:1fr!important;

  }

  .member-password-card{

    margin-top:0!important;

  }

  .member-password-actions button{

    flex:1 1 100%!important;

  }

}

@media print{

  .member-password-card{display:none!important}

  #ktaPreview .rev50-card{

    transform:none!important;

    margin-bottom:0!important;

  }

}



/* ===== Revisi 81: Login Anggota dengan Password ===== */

.member-login-help{

  margin:10px 0 0!important;

  padding:9px 11px;

  border-radius:10px;

  background:#f3f8fe;

  color:#526176!important;

  font-size:11.5px!important;

  line-height:1.4!important;

}

.login-card button[disabled]{

  opacity:.65;

  cursor:wait;

}



/* ===== Revisi 82: Login Password & Lupa Password Anggota ===== */

.btn-forgot-password{

  background:transparent!important;

  color:#0c4a8f!important;

  border:1px dashed #b8d0ea!important;

  margin-top:5px!important;

}

.btn-forgot-password:hover{

  background:#eef6ff!important;

}

.login-card button[disabled]{

  opacity:.65;

  cursor:wait;

}

#memberRecoveryPage:not(.hidden){

  display:grid!important;

  z-index:800!important;

}

@media(max-width:700px){

  .btn-forgot-password{

    min-height:44px!important;

  }

}



/* ===== Revisi 83: Semua popup benar-benar center pada handphone ===== */

html, body{

  max-width:100vw;

  overflow-x:hidden;

}



/* Center universal untuk modal popup aplikasi */

.activation-modal:not(.hidden),

.modal-shell:not(.hidden){

  position:fixed!important;

  inset:0!important;

  left:0!important;

  right:0!important;

  top:0!important;

  bottom:0!important;

  width:100vw!important;

  max-width:100vw!important;

  min-height:100dvh!important;

  height:100dvh!important;

  padding:16px!important;

  margin:0!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  overflow-y:auto!important;

  overflow-x:hidden!important;

  transform:none!important;

}



/* Card popup selalu dihitung dari lebar layar, bukan elemen induk */

.activation-modal:not(.hidden) .activation-card,

.modal-shell:not(.hidden) .modal-card{

  position:relative!important;

  left:auto!important;

  right:auto!important;

  top:auto!important;

  bottom:auto!important;

  transform:none!important;

  width:min(470px, calc(100vw - 32px))!important;

  max-width:calc(100vw - 32px)!important;

  min-width:0!important;

  margin:auto!important;

  flex:0 1 auto!important;

  box-sizing:border-box!important;

}



/* Profil pengajuan lebih lebar saat desktop, tetapi tetap center di HP */

.modal-shell:not(.hidden) .modal-card{

  width:min(790px, calc(100vw - 32px))!important;

}



/* Halaman ganti/reset password juga center */

.password-change-page:not(.hidden){

  min-height:100dvh!important;

  width:100vw!important;

  max-width:100vw!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  padding:16px!important;

  overflow-x:hidden!important;

}

.password-change-page:not(.hidden) .password-change-card{

  width:min(470px, calc(100vw - 32px))!important;

  max-width:calc(100vw - 32px)!important;

  margin:auto!important;

}



/* Mobile: card tidak terlalu mepet tepi dan isi tetap nyaman dibaca */

@media screen and (max-width:700px){

  .activation-modal:not(.hidden),

  .modal-shell:not(.hidden){

    padding:14px!important;

    align-items:center!important;

  }

  .activation-modal:not(.hidden) .activation-card,

  .modal-shell:not(.hidden) .modal-card{

    width:calc(100vw - 28px)!important;

    max-width:calc(100vw - 28px)!important;

    margin:auto!important;

    padding:22px 18px 18px!important;

    border-radius:22px!important;

  }

  .activation-card h2{

    font-size:clamp(22px, 6.2vw, 27px)!important;

    line-height:1.16!important;

    padding-right:38px!important;

  }

  .activation-close{

    right:10px!important;

    top:10px!important;

  }

  .modal-shell:not(.hidden) .modal-card{

    max-height:calc(100dvh - 28px)!important;

  }

  .password-change-page:not(.hidden) .password-change-card{

    width:calc(100vw - 28px)!important;

    max-width:calc(100vw - 28px)!important;

    margin:auto!important;

  }

}



/* Untuk tinggi layar pendek, popup tetap center bila muat,

   dan dapat discroll aman bila kontennya lebih tinggi dari layar. */

@media screen and (max-width:700px) and (max-height:640px){

  .activation-modal:not(.hidden),

  .modal-shell:not(.hidden),

  .password-change-page:not(.hidden){

    align-items:flex-start!important;

    padding-top:14px!important;

    padding-bottom:14px!important;

  }

}



/* ===== Revisi 84: Dialog Konfirmasi & Notifikasi Sistem ===== */

.system-dialog-card{

  width:min(470px,calc(100vw - 32px))!important;

}

.system-dialog-card h2{

  padding-right:0!important;

  margin-bottom:8px!important;

}

.system-dialog-actions{

  display:flex;

  justify-content:flex-end;

  gap:9px;

  margin-top:18px;

}

.system-dialog-actions button{

  margin:0!important;

  min-width:120px;

}

.system-dialog textarea{

  width:100%;

  resize:vertical;

  min-height:96px;

  padding:12px;

  border:1px solid var(--line);

  border-radius:12px;

  font:inherit;

  box-sizing:border-box;

}

@media screen and (max-width:700px){

  .system-dialog-actions{

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

  }

  .system-dialog-actions button{

    min-width:0!important;

    width:100%!important;

    min-height:46px!important;

  }

}



/* ===== Revisi 85: KTA vertikal mobile untuk semua role ===== */

/* Berlaku untuk Pengurus Nasional, Pengurus Daerah, dan Anggota saat preview di HP.

   Kartu cetak/PDF tetap pada ukuran fisik asli. */

@media screen and (max-width:700px){

  body.session-authenticated #app:not(.hidden) #ktaPreview{

    width:100%!important;

    max-width:100%!important;

    overflow:hidden!important;

    padding:0!important;

    margin-top:10px!important;

    background:transparent!important;

  }



  body.session-authenticated #app:not(.hidden) #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet{

    width:100%!important;

    min-height:0!important;

    height:auto!important;

    padding:4px 0 18px!important;

    margin:0 auto!important;

    background:transparent!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    gap:14px!important;

    transform:none!important;

    transform-origin:center top!important;

    overflow:visible!important;

  }



  body.session-authenticated #app:not(.hidden) #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet .rev50-card{

    flex:0 0 auto!important;

    transform-origin:top center!important;

  }



  /* Toolbar pengurus tetap tampil dan dibuat rapi di atas kartu. */

  body.session-authenticated #app:not(.hidden) .kta-control{

    padding:12px!important;

    margin-bottom:10px!important;

    overflow:hidden!important;

  }

  body.session-authenticated #app:not(.hidden) .kta-control .toolbar-grid{

    grid-template-columns:1fr!important;

    gap:8px!important;

  }

  body.session-authenticated #app:not(.hidden) .kta-control .search-input,

  body.session-authenticated #app:not(.hidden) .kta-control select{

    width:100%!important;

    max-width:100%!important;

    box-sizing:border-box!important;

  }

  body.session-authenticated #app:not(.hidden) .kta-control .actions{

    width:100%!important;

    display:grid!important;

    grid-template-columns:1fr!important;

    gap:8px!important;

  }

  body.session-authenticated #app:not(.hidden) .kta-control .actions button{

    width:100%!important;

    min-height:44px!important;

    padding:10px 8px!important;

    font-size:12px!important;

  }



  /* Akun Anggota tidak memerlukan pencarian/pemilih kartu sendiri. */

  body.session-authenticated #app.member-app:not(.hidden) .kta-control .search-input,

  body.session-authenticated #app.member-app:not(.hidden) .kta-control select{

    display:none!important;

  }

}



@media print{

  #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet{

    width:297mm!important;

    height:210mm!important;

    display:flex!important;

    flex-direction:row!important;

    gap:10mm!important;

    padding:10mm!important;

  }

  #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet .rev50-card{

    transform:none!important;

    margin-bottom:0!important;

  }

}



/* ===== Revisi 86: Print/PDF KTA memakai dokumen khusus tanpa menu dashboard ===== */

/* Kelas ini dipakai di halaman cetak baru yang hanya berisi KTA.

   Tidak ada sidebar, header aplikasi, filter, atau tombol yang ikut tercetak. */

body.kta-only-print #ktaPrintRoot{

  background:#fff!important;

}

@media print{

  body.kta-only-print *{

    visibility:visible!important;

  }

  body.kta-only-print #ktaPrintRoot{

    display:block!important;

    position:static!important;

  }

}



/* ===== Revisi 87: Panel Lonceng Notifikasi Center pada Handphone ===== */

.notification-panel-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}

.notification-close{

  display:none;

  width:34px!important;

  height:34px!important;

  min-width:34px!important;

  padding:0!important;

  border-radius:999px!important;

  background:#dfeefe!important;

  color:#08335f!important;

  font-size:24px!important;

  line-height:1!important;

  box-shadow:none!important;

}

.notification-backdrop{

  display:none;

}

@media screen and (max-width:700px){

  body.notification-panel-open{

    overflow:hidden!important;

  }

  .notification-backdrop:not(.hidden){

    display:block!important;

    position:fixed!important;

    inset:0!important;

    width:100vw!important;

    height:100dvh!important;

    z-index:1090!important;

    background:rgba(2,12,27,.58)!important;

  }

  .notification-panel:not(.hidden){

    position:fixed!important;

    top:50%!important;

    left:50%!important;

    right:auto!important;

    bottom:auto!important;

    transform:translate(-50%,-50%)!important;

    width:calc(100vw - 28px)!important;

    max-width:420px!important;

    max-height:calc(100dvh - 32px)!important;

    margin:0!important;

    border-radius:22px!important;

    z-index:1100!important;

    overflow:hidden!important;

    box-sizing:border-box!important;

    box-shadow:0 24px 65px rgba(0,0,0,.34)!important;

  }

  .notification-panel-head{

    padding:14px 14px 14px 16px!important;

  }

  .notification-panel-head b{

    font-size:16px!important;

    line-height:1.25!important;

  }

  .notification-close{

    display:grid!important;

    place-items:center!important;

  }

  .notification-panel-body{

    max-height:calc(100dvh - 185px)!important;

    overflow-y:auto!important;

    padding:9px!important;

  }

  .notification-item{

    padding:11px 10px!important;

    gap:7px!important;

  }

  .notification-item b{

    font-size:12px!important;

  }

  .notification-item div span{

    max-width:44vw!important;

  }

  .notification-link{

    min-height:47px!important;

    border-radius:0!important;

  }

}

@media print{

  .notification-backdrop,.notification-panel{

    display:none!important;

  }

}



/* ===== Revisi 88: Responsive Daftar Data Nasional/Daerah pada Handphone ===== */

@media screen and (max-width:700px){

  html, body{

    width:100%!important;

    max-width:100vw!important;

    overflow-x:hidden!important;

  }

  body.session-authenticated #app:not(.hidden),

  body.session-authenticated #app:not(.hidden) .content,

  body.session-authenticated #app:not(.hidden) #view{

    width:100%!important;

    max-width:100vw!important;

    min-width:0!important;

    overflow-x:hidden!important;

  }

  body.session-authenticated #app:not(.hidden) .content{

    padding:10px!important;

  }

  body.session-authenticated #app:not(.hidden) .card,

  body.session-authenticated #app:not(.hidden) .grid,

  body.session-authenticated #app:not(.hidden) .grid.two,

  body.session-authenticated #app:not(.hidden) .stats{

    width:100%!important;

    max-width:100%!important;

    min-width:0!important;

  }

  body.session-authenticated #app:not(.hidden) .card{

    padding:12px!important;

    border-radius:16px!important;

  }

  body.session-authenticated #app:not(.hidden) .grid.two{

    grid-template-columns:1fr!important;

  }

  body.session-authenticated #app:not(.hidden) .section-header{

    display:flex!important;

    flex-direction:column!important;

    align-items:stretch!important;

    gap:8px!important;

  }

  body.session-authenticated #app:not(.hidden) .search-box{

    width:100%!important;

    min-width:0!important;

    flex-direction:column!important;

    align-items:stretch!important;

  }



  /* Seluruh daftar data tampil sebagai card, bukan tabel melebar. */

  #view .responsive-data-table{

    display:block!important;

    width:100%!important;

    max-width:100%!important;

    border-collapse:separate!important;

    background:transparent!important;

    overflow:visible!important;

  }

  #view .responsive-data-table thead{

    position:absolute!important;

    width:1px!important;

    height:1px!important;

    overflow:hidden!important;

    clip-path:inset(50%)!important;

    white-space:nowrap!important;

  }

  #view .responsive-data-table tbody{

    display:grid!important;

    width:100%!important;

    gap:10px!important;

  }

  #view .responsive-data-table tbody tr{

    display:block!important;

    width:100%!important;

    padding:8px 11px!important;

    background:#fff!important;

    border:1px solid #d9e2ef!important;

    border-radius:14px!important;

    box-shadow:0 4px 14px rgba(15,23,42,.045)!important;

  }

  #view .responsive-data-table tbody tr:hover td{

    background:transparent!important;

  }

  #view .responsive-data-table tbody td{

    display:grid!important;

    grid-template-columns:minmax(94px,35%) minmax(0,1fr)!important;

    gap:8px!important;

    align-items:start!important;

    width:100%!important;

    min-width:0!important;

    padding:7px 0!important;

    border-bottom:1px dashed #e5edf6!important;

    white-space:normal!important;

    overflow-wrap:anywhere!important;

    font-size:13px!important;

  }

  #view .responsive-data-table tbody td:last-child{

    border-bottom:0!important;

  }

  #view .responsive-data-table tbody td::before{

    content:attr(data-label);

    display:block;

    font-size:11px!important;

    font-weight:850!important;

    letter-spacing:.02em!important;

    text-transform:uppercase!important;

    color:#526176!important;

  }

  #view .responsive-data-table tbody td.mobile-photo-cell{

    align-items:center!important;

  }

  #view .responsive-data-table tbody td.mobile-photo-cell .avatar{

    width:52px!important;

    height:52px!important;

  }

  #view .responsive-data-table tbody td.mobile-actions-cell{

    display:block!important;

    padding-top:10px!important;

  }

  #view .responsive-data-table tbody td.mobile-actions-cell::before{

    margin-bottom:8px!important;

  }

  #view .responsive-data-table tbody td.mobile-actions-cell button{

    display:block!important;

    width:100%!important;

    min-height:43px!important;

    margin:6px 0!important;

    padding:10px 8px!important;

  }

  #view .responsive-data-table .approval-status,

  #view .responsive-data-table .pill{

    width:max-content!important;

    max-width:100%!important;

  }



  /* Pagination pada HP mengikuti lebar layar. */

  #view .table-pagination{

    display:flex!important;

    flex-direction:column!important;

    align-items:stretch!important;

    gap:9px!important;

    width:100%!important;

    padding:10px 0 0!important;

  }

  #view .table-pagination .page-info{

    text-align:center!important;

    font-size:12px!important;

  }

  #view .table-pagination .page-actions{

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

    gap:8px!important;

  }

  #view .table-pagination .page-actions button{

    width:100%!important;

    min-height:42px!important;

  }

  #view .page-size-control select{

    max-width:110px!important;

  }



  /* Laporan chart ikut rapi ketika layar sempit. */

  #view .bar-item{

    grid-template-columns:minmax(72px,94px) 1fr 24px!important;

    width:100%!important;

  }

  #view .bar-label{

    white-space:normal!important;

    overflow-wrap:anywhere!important;

  }

  #view .pie-wrap{

    flex-direction:column!important;

    align-items:flex-start!important;

  }

  #view .pie-legend{

    width:100%!important;

  }



  /* Tombol export/cetak laporan tidak keluar layar. */

  #view .report-control .actions{

    display:grid!important;

    grid-template-columns:1fr!important;

    width:100%!important;

  }

  #view .report-control .actions button{

    width:100%!important;

    min-height:44px!important;

  }

}



/* ===== Revisi 91: Blok Identitas Login Putih Transparan dan Center ===== */

/* Area identitas organisasi pada halaman login dibuat lebih cerah dan mudah dibaca. */

.login-page .login-identity{

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  border-left:5px solid var(--ui-gold)!important;

  border-radius:20px!important;

  box-shadow:0 14px 36px rgba(8,31,60,.10)!important;

  backdrop-filter:none!important;

  -webkit-backdrop-filter:none!important;

  padding:16px 20px!important;

  color:#08335f!important;

  text-shadow:none!important;

  display:flex!important;

  flex-direction:column!important;

  align-items:center!important;

  justify-content:center!important;

  text-align:center!important;

  gap:3px!important;

}

.login-page .identity-logos{

  width:100%!important;

  display:flex!important;

  justify-content:center!important;

  align-items:center!important;

  gap:16px!important;

  margin:0 0 9px!important;

}

.login-page .identity-logos img{

  background:transparent!important;

  object-fit:contain!important;

  filter:drop-shadow(0 2px 4px rgba(8,43,87,.12))!important;

}

.login-page .login-identity b{

  width:100%!important;

  color:#08335f!important;

  text-shadow:none!important;

  text-align:center!important;

  font-weight:850!important;

}

.login-page .login-identity span{

  width:100%!important;

  color:#334e70!important;

  text-shadow:none!important;

  text-align:center!important;

  font-weight:700!important;

}



/* Desktop: tetap sebagai blok area bawah pojok, isi berada di tengah. */

@media screen and (min-width:701px){

  .login-page .login-identity{

    min-width:360px!important;

    padding:16px 24px!important;

  }

}



/* Handphone: blok tetap cerah, proporsional dan center di bawah form login. */

@media screen and (max-width:700px){

  .login-page .login-identity{

    position:relative!important;

    left:auto!important;

    right:auto!important;

    top:auto!important;

    bottom:auto!important;

    margin:0 auto!important;

    width:min(100%,420px)!important;

    padding:14px 16px!important;

    border-left-width:4px!important;

  }

  .login-page .identity-logos{

    gap:14px!important;

    margin-bottom:8px!important;

  }

  .login-page .login-identity b{

    font-size:15px!important;

    line-height:1.3!important;

  }

  .login-page .login-identity span{

    font-size:12px!important;

    line-height:1.35!important;

  }

}



/* ===== Revisi 92 Final: Blok Identitas Sidebar Logo & Tulisan Center ===== */

/* Struktur aktual aplikasi: .brand-panel, .brand-logos, .sidebar-identity-label */

.sidebar .brand-panel,

.brand-panel{

  display:flex!important;

  flex-direction:column!important;

  align-items:center!important;

  justify-content:center!important;

  text-align:center!important;

  padding-left:18px!important;

  padding-right:18px!important;

}

.sidebar .brand-panel .brand-logos,

.brand-panel .brand-logos{

  width:100%!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  gap:16px!important;

  margin-left:auto!important;

  margin-right:auto!important;

  margin-bottom:10px!important;

}

.sidebar .brand-panel .brand-logos img,

.brand-panel .brand-logos img{

  display:block!important;

  object-fit:contain!important;

  margin:0!important;

}

.sidebar .brand-panel h1,

.sidebar .brand-panel h2,

.sidebar .brand-panel h3,

.sidebar .brand-panel p,

.sidebar .brand-panel b,

.sidebar .brand-panel span,

.sidebar .brand-panel .sidebar-identity-label,

.brand-panel h1,

.brand-panel h2,

.brand-panel h3,

.brand-panel p,

.brand-panel b,

.brand-panel span,

.brand-panel .sidebar-identity-label{

  width:100%!important;

  display:block!important;

  margin-left:auto!important;

  margin-right:auto!important;

  text-align:center!important;

}

/* antisipasi teks nama aplikasi yang berada langsung dalam elemen label */

.sidebar-identity-label{

  text-align:center!important;

  align-items:center!important;

  justify-content:center!important;

}

@media screen and (max-width:900px){

  .sidebar .brand-panel,

  .brand-panel{

    align-items:center!important;

    justify-content:center!important;

    text-align:center!important;

  }

  .sidebar .brand-panel .brand-logos,

  .brand-panel .brand-logos{

    justify-content:center!important;

  }

}



/* ===== Revisi 94: Navigasi dinamis, responsif & profesional ===== */

.sidebar nav{display:flex;flex-direction:column;gap:4px}

.sidebar nav .menu-flat{display:flex;flex-direction:column;gap:4px}

.sidebar nav button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:1px solid transparent;color:#cfe0fb;font-weight:650;font-size:13.5px;padding:9px 11px;border-radius:10px;text-align:left;line-height:1.2;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}

.sidebar nav button .nav-ic{width:18px;height:18px;flex:0 0 18px;opacity:.85}

.sidebar nav button>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sidebar nav button:hover{background:rgba(255,255,255,.10);color:#fff}

.sidebar nav button:active{transform:scale(.985)}

.sidebar nav button.active{background:rgba(242,201,76,.16);color:#fff;border-color:rgba(242,201,76,.30);box-shadow:inset 3px 0 0 var(--gold)}

.sidebar nav button.active .nav-ic{opacity:1;color:var(--gold)}



.sidebar nav .menu-group{display:flex;flex-direction:column}

.sidebar nav .menu-group-head{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;color:#8fa9d4;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:11px 9px 6px;cursor:pointer;border-radius:8px}

.sidebar nav .menu-group-head .nav-ic{width:15px;height:15px;flex:0 0 15px;opacity:.7}

.sidebar nav .menu-group-head>span{flex:1 1 auto;text-align:left}

.sidebar nav .menu-group-head .nav-caret{width:16px;height:16px;flex:0 0 16px;opacity:.8;transition:transform .22s ease}

.sidebar nav .menu-group:not(.open) .menu-group-head .nav-caret{transform:rotate(-90deg)}

.sidebar nav .menu-group-head:hover{color:#cfe0fb}

.sidebar nav .menu-group-body{display:flex;flex-direction:column;gap:4px;overflow:hidden;max-height:0;opacity:0;transition:max-height .26s ease,opacity .2s ease}

.sidebar nav .menu-group.open .menu-group-body{max-height:520px;opacity:1}



.menu-toggle{display:none}

.menu-toggle svg{width:22px;height:22px}

.sidebar-close{display:none}

.sidebar-backdrop{display:none}



@media(max-width:900px){

  .app,.app.member-app{display:block!important}

  .content,.app.member-app .content{order:0!important;padding:14px!important}

  .topbar{gap:8px}

  .menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--ui-deep,#08335f);flex:0 0 auto;cursor:pointer}

  .menu-toggle:active{transform:scale(.96)}

  .sidebar,.app.member-app .sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;height:100dvh!important;width:min(82vw,300px)!important;margin:0!important;z-index:1200!important;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:0 18px 60px rgba(0,0,0,.45);overflow:auto!important;order:0!important}

  .app.sidebar-open .sidebar,.app.member-app.sidebar-open .sidebar{transform:translateX(0)!important}

  .sidebar-backdrop{display:block!important;position:fixed;inset:0;background:rgba(4,12,28,.55);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:1100}

  .app.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}

  .sidebar-close{display:inline-flex!important;position:absolute;top:12px;right:12px;width:34px;height:34px;align-items:center;justify-content:center;background:rgba(255,255,255,.14);border:0;border-radius:9px;color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2}

}

@media print{.menu-toggle,.sidebar-close,.sidebar-backdrop{display:none!important}}



/* ===== Revisi 95: Ganti Avatar Profil Sidebar ===== */

.sidebar-avatar-container {

  position: relative;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  cursor: pointer;

  overflow: hidden;

  flex-shrink: 0;

}

.sidebar-avatar-container img.sidebar-avatar {

  width: 42px;

  height: 42px;

  object-fit: cover;

  border-radius: 50%;

  border: 2px solid var(--ui-gold, #f2c94c);

  display: block;

}

.sidebar-avatar-container .sidebar-avatar-fallback {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  display: grid;

  place-items: center;

  border: 2px solid rgba(255, 255, 255, 0.25);

}

.sidebar-avatar-container .sidebar-avatar-hover {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity 0.2s ease;

  z-index: 2;

}

.sidebar-avatar-container:hover .sidebar-avatar-hover {

  opacity: 1 !important;

}



/* ===== Revisi 96: Fix KTA layout di WebView Android ===== */

/* Masalah: unit mm dan transform:scale(.78) dari line 12 menyebabkan

   KTA berantakan di WebView Android karena DPI/viewport berbeda.

   Solusi: override scaling khusus mobile preview, gunakan sizing yang

   responsif berdasarkan lebar viewport. */



/* Preview KTA di mobile — tampilkan kartu secara vertikal dengan ukuran terkontrol */

@media screen and (max-width:900px){

  /* Override rule di line 12 yang memaksa scale(.78) dan width:380mm */

  #ktaPreview .rev50-sheet{

    transform:none!important;

    width:100%!important;

    min-height:auto!important;

    height:auto!important;

    padding:8px 0!important;

    margin:0 auto!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    gap:14px!important;

    background:transparent!important;

  }



  /* Kartu KTA individual: gunakan pixel sizing yang konsisten */

  #ktaPreview .rev50-card{

    width:min(324px, calc(100vw - 28px))!important;

    height:auto!important;

    aspect-ratio:85.6 / 53.98!important;

    flex:0 0 auto!important;

    transform:none!important;

    margin:0!important;

    transform-origin:top center!important;

    box-shadow:0 4px 16px rgba(0,0,0,.15)!important;

  }



  /* Pastikan konten di dalam kartu tetap proporsional */

  #ktaPreview .rev50-card *{

    max-width:100%;

  }



  /* Override KTA control button layout untuk mobile */

  .kta-control .actions{

    width:100%!important;

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

    gap:8px!important;

  }

  .kta-control .actions button{

    padding:10px 6px!important;

    font-size:11px!important;

    min-height:44px!important;

    white-space:normal!important;

    line-height:1.2!important;

  }

}



/* Khusus layar sangat kecil (< 380px) */

@media screen and (max-width:380px){

  #ktaPreview .rev50-card{

    width:calc(100vw - 20px)!important;

  }

  .kta-control .actions{

    grid-template-columns:1fr!important;

  }

}



/* Pastikan print/PDF tidak terpengaruh override mobile */

@media print{

  #ktaPreview .rev50-sheet{

    flex-direction:row!important;

    width:297mm!important;

    height:210mm!important;

    padding:16mm 10mm!important;

    gap:10mm!important;

    background:#fff!important;

  }

  #ktaPreview .rev50-card{

    width:85.6mm!important;

    height:53.98mm!important;

    aspect-ratio:auto!important;

    transform:none!important;

  }

}





/* ===== Revisi 97: Fix final KTA untuk APK/WebView Android =====

   Tujuan: preview mobile tetap pakai ukuran fisik kartu lalu diskalakan,

   bukan mengecilkan width kartu yang membuat posisi mm berantakan. */

.rev50-card{

  width:85.6mm!important;

  height:53.98mm!important;

  aspect-ratio:auto!important;

  contain:layout paint!important;

  -webkit-print-color-adjust:exact!important;

  print-color-adjust:exact!important;

}

.rev50-title{

  left:17.8mm!important;

  right:17.8mm!important;

  width:auto!important;

  text-align:center!important;

  display:block!important;

  top:8.45mm!important;

}

.rev50-title h1{

  display:block!important;

  width:100%!important;

  text-align:center!important;

  font-size:2.72mm!important;

  line-height:1.02!important;

  letter-spacing:.05mm!important;

  white-space:nowrap!important;

  overflow:visible!important;

}

.rev50-title p{

  display:block!important;

  width:100%!important;

  text-align:center!important;

  font-size:1.04mm!important;

  line-height:1.08!important;

  margin-top:.58mm!important;

  white-space:normal!important;

  overflow:visible!important;

  text-overflow:clip!important;

  letter-spacing:0!important;

}

.rev50-title strong{

  display:block!important;

  width:100%!important;

  text-align:center!important;

  font-size:1.18mm!important;

  line-height:1.08!important;

  margin-top:.42mm!important;

  white-space:normal!important;

  overflow:visible!important;

  text-overflow:clip!important;

  letter-spacing:.03mm!important;

}

.rev50-badge{

  top:16.85mm!important;

  left:31.5mm!important;

  right:31.5mm!important;

  height:3.25mm!important;

  font-size:1.58mm!important;

}

.rev50-logo{

  top:4.15mm!important;

  width:11.4mm!important;

  height:8mm!important;

}

.rev50-logo-left{left:7.8mm!important}

.rev50-logo-right{right:7.8mm!important}

.rev50-photo{

  top:23.6mm!important;

  left:8.3mm!important;

  width:18.6mm!important;

  height:24.2mm!important;

}

.rev50-front-values{

  top:24.35mm!important;

  left:31.1mm!important;

  width:45.2mm!important;

}

.rev50-row{

  grid-template-columns:12.1mm 1.7mm 1fr!important;

  height:2.95mm!important;

  font-size:1.56mm!important;

  line-height:1!important;

}

.rev50-back-title{top:8.45mm!important}

.rev50-back-badge{top:16.85mm!important}

.rev50-rules{

  top:21.15mm!important;

  left:8mm!important;

  width:47.5mm!important;

  max-height:15.8mm!important;

  overflow:hidden!important;

  color:#082b57!important;

}

.rev50-rules h2{

  font-size:1.55mm!important;

  line-height:1!important;

  margin:0 0 .42mm!important;

  letter-spacing:.05mm!important;

}

.rev50-rules ol{

  font-size:1.04mm!important;

  line-height:1.08!important;

  padding-left:3.15mm!important;

  margin:0!important;

  font-weight:800!important;

}

.rev50-rules li{margin:.06mm 0!important}

.rev50-qr{

  top:23.2mm!important;

  right:7.5mm!important;

  width:11.8mm!important;

  height:13.7mm!important;

  padding:.45mm!important;

}

.rev50-qr img,

.rev50-qr canvas{

  width:9.05mm!important;

  height:9.05mm!important;

  object-fit:contain!important;

}

.rev50-qr em{font-size:1.02mm!important}

.rev50-sign-left{

  left:16.6mm!important;

  top:38.25mm!important;

  width:18mm!important;

}

.rev50-sign-right{

  left:49.2mm!important;

  top:38.25mm!important;

  width:18mm!important;

}

.rev50-sign-title{font-size:1.24mm!important;line-height:1.02!important;margin-bottom:.12mm!important}

.rev50-ttd{height:3.35mm!important;max-width:16mm!important;margin-bottom:-.22mm!important}

.rev50-sign-line{width:15.5mm!important}

.rev50-sign-name{font-size:1.08mm!important;line-height:1.03!important;min-height:2.3mm!important}

.rev50-stamp-wrap{

  left:38.75mm!important;

  top:38.25mm!important;

  width:8.2mm!important;

  height:8.2mm!important;

}

.rev50-stamp{max-width:8.2mm!important;max-height:8.2mm!important}

.rev50-back-address{

  bottom:1.75mm!important;

  left:9mm!important;

  right:9mm!important;

  font-size:1.02mm!important;

  line-height:1.05!important;

}

.kta-print-preview-actions .actions{

  display:flex!important;

  flex-wrap:wrap!important;

  gap:8px!important;

}

@media screen and (max-width:900px){

  #ktaPreview .rev50-sheet,

  #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

  #ktaPreview .rev50-sheet.member-mobile-kta-sheet{

    width:100%!important;

    min-height:0!important;

    height:auto!important;

    padding:6px 0 18px!important;

    margin:0 auto!important;

    background:transparent!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    gap:14px!important;

    overflow:visible!important;

    transform:none!important;

  }

  #ktaPreview .rev50-card{

    width:85.6mm!important;

    height:53.98mm!important;

    aspect-ratio:auto!important;

    transform:scale(var(--mobile-kta-scale, 1))!important;

    transform-origin:top center!important;

  }

  .kta-control .actions,

  .kta-print-preview-actions .actions{

    width:100%!important;

    display:grid!important;

    grid-template-columns:1fr!important;

    gap:8px!important;

  }

  .kta-control .actions button,

  .kta-print-preview-actions .actions button{

    width:100%!important;

    min-height:44px!important;

    white-space:normal!important;

    line-height:1.2!important;

  }

}

@media print{

  .rev50-card{

    width:85.6mm!important;

    height:53.98mm!important;

    aspect-ratio:auto!important;

    transform:none!important;

    margin-bottom:0!important;

  }

  .rev50-title{top:8.45mm!important;text-align:center!important}

  .rev50-rules{top:21.15mm!important;max-height:15.8mm!important;overflow:hidden!important}

}







/* ===== Revisi 101: KTA fixed virtual layout untuk APK dan Web =====

   Screen APK/Web memakai px absolut agar layout sama di Android WebView dan website.

   Export PDF/PNG memakai hasil render HTML yang sama, sehingga posisi tidak berubah. */

.rev50-card{

  font-size:1px!important;

  width:856px!important;

  height:540px!important;

  min-width:856px!important;

  max-width:856px!important;

  aspect-ratio:auto!important;

  position:relative!important;

  overflow:hidden!important;

  flex:0 0 856px!important;

  border-radius:38px!important;

  background-image:url('assets/kta-template-rev56.png')!important;

  background-size:100% 100%!important;

  background-repeat:no-repeat!important;

  background-position:center!important;

  font-family:Arial,Helvetica,sans-serif!important;

  color:#082b57!important;

  contain:layout paint!important;

  -webkit-print-color-adjust:exact!important;

  print-color-adjust:exact!important;

}

.rev50-logo{position:absolute!important;top:41.5px!important;width:114px!important;height:80px!important;display:grid!important;place-items:center!important;z-index:2!important}

.rev50-logo-left{left:78px!important}.rev50-logo-right{right:78px!important}

.rev50-logo img{max-width:100%!important;max-height:100%!important;object-fit:contain!important}.rev50-logo b{font-size:46px!important;color:#0c3365!important;letter-spacing:4px!important}

.rev50-title{position:absolute!important;left:178px!important;right:178px!important;top:84.5px!important;width:auto!important;text-align:center!important;z-index:2!important;display:block!important}

.rev50-title h1{display:block!important;width:100%!important;margin:0!important;color:#071a37!important;font-size:27.2px!important;line-height:1.02!important;font-weight:950!important;letter-spacing:.5px!important;text-align:center!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

.rev50-title p{display:block!important;width:100%!important;margin:5.8px 0 0!important;color:#163b67!important;font-size:16px!important;line-height:1.15!important;font-weight:900!important;text-align:center!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;letter-spacing:0!important}

.rev50-title strong{display:block!important;width:100%!important;margin:4.2px 0 0!important;color:#c9141b!important;font-size:13.5px!important;line-height:1.08!important;font-weight:950!important;text-align:center!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;letter-spacing:.3px!important}

.rev50-badge{position:absolute!important;left:315px!important;right:315px!important;top:168.5px!important;height:32.5px!important;border-radius:999px!important;background:linear-gradient(180deg,#115fb0,#072c63)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-size:15.8px!important;font-weight:950!important;letter-spacing:1px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px rgba(0,0,0,.18)!important;z-index:2!important;white-space:nowrap!important}

.rev50-photo{position:absolute!important;left:83px!important;top:236px!important;width:186px!important;height:242px!important;border:4.5px solid #246cae!important;border-radius:20px!important;overflow:hidden!important;display:grid!important;place-items:center!important;color:#6f7f92!important;background:#eef2f4!important;font-size:25px!important;font-weight:900!important;z-index:2!important}

.rev50-photo img{width:100%!important;height:100%!important;object-fit:cover!important}

.rev50-front-values{position:absolute!important;left:311px!important;top:243.5px!important;width:452px!important;z-index:2!important}

.rev50-row{display:grid!important;grid-template-columns:121px 17px 1fr!important;align-items:center!important;height:29.5px!important;font-size:15.6px!important;line-height:1!important;color:#082b57!important}

.rev50-row b{font-weight:950!important}.rev50-row span{font-weight:950!important;text-align:center!important}.rev50-row strong{font-weight:850!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;border-bottom:1.2px solid rgba(8,43,87,.54)!important;padding-bottom:1.5px!important;min-width:0!important}

.rev50-front .rev50-front-daerah,.rev50-front .rev50-front-no{display:none!important}

.rev50-back-title{top:84.5px!important}.rev50-back-badge{top:168.5px!important}

.rev50-rules{position:absolute!important;top:211.5px!important;left:80px!important;width:475px!important;max-height:158px!important;overflow:hidden!important;color:#082b57!important;z-index:2!important}

.rev50-rules h2{font-size:15.5px!important;line-height:1!important;margin:0 0 4.2px!important;letter-spacing:.5px!important;color:#071a37!important;font-weight:950!important}

.rev50-rules ol{font-size:16px!important;line-height:1.15!important;padding-left:31.5px!important;margin:0!important;font-weight:800!important;color:#082b57!important}

.rev50-rules li{margin:.6px 0!important}

.rev50-qr{position:absolute!important;top:232px!important;right:75px!important;width:118px!important;height:137px!important;padding:4.5px!important;background:#fff!important;border:5px solid #0c3d78!important;border-radius:14px!important;display:grid!important;grid-template-rows:1fr auto!important;place-items:center!important;overflow:hidden!important;z-index:2!important}

.rev50-qr img,.rev50-qr canvas,.rev50-qr svg{display:block!important;width:90.5px!important;height:90.5px!important;object-fit:contain!important;image-rendering:pixelated!important}.rev50-qr em{font-style:normal!important;font-size:10.2px!important;font-weight:950!important;color:#0c3d78!important;line-height:1!important;text-align:center!important;letter-spacing:.2px!important}

.rev50-sign{position:absolute!important;text-align:center!important;color:#082b57!important;z-index:2!important}

.rev50-sign-left{left:166px!important;top:382.5px!important;width:180px!important}.rev50-sign-right{left:492px!important;top:382.5px!important;width:180px!important}

.rev50-sign-title{font-size:12.4px!important;line-height:1.02!important;margin-bottom:1.2px!important;font-weight:950!important}.rev50-ttd{height:33.5px!important;max-width:160px!important;object-fit:contain!important;display:block!important;margin:0 auto -2.2px!important}.rev50-sign-line{height:1.6px!important;background:#082b57!important;margin:0 auto 2.5px!important;width:155px!important}.rev50-sign-name{font-size:10.8px!important;line-height:1.03!important;font-weight:950!important;white-space:normal!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;min-height:23px!important}

.rev50-stamp-wrap{position:absolute!important;left:387.5px!important;top:382.5px!important;width:82px!important;height:82px!important;display:grid!important;place-items:center!important;z-index:3!important}.rev50-stamp{max-width:82px!important;max-height:82px!important;object-fit:contain!important}

.rev50-back-address{position:absolute!important;bottom:17.5px!important;left:90px!important;right:90px!important;width:auto!important;color:#111!important;text-shadow:none!important;font-size:10.2px!important;font-weight:750!important;line-height:1.05!important;text-align:center!important;display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;z-index:2!important}

#ktaPreview{overflow:auto!important;-webkit-overflow-scrolling:touch!important;padding:4px 0 18px!important}

#ktaPreview .rev50-sheet,#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,#ktaPreview .rev50-sheet.member-mobile-kta-sheet{width:auto!important;min-height:0!important;height:auto!important;padding:0!important;margin:0 auto 20px!important;background:transparent!important;display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:center!important;gap:40px!important;overflow:visible!important;transform:none!important;transform-origin:top center!important;box-sizing:border-box!important;flex-wrap:nowrap!important}

#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,#ktaPreview .rev50-sheet.member-mobile-kta-sheet{flex-direction:column!important;gap:16px!important;align-items:center!important;justify-content:flex-start!important}

#ktaPreview .rev50-card{box-shadow:0 4px 18px rgba(0,0,0,.18)!important;margin:0!important;transform:none!important}

.kta-print-preview-actions .actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}

@media screen and (max-width:900px){.kta-control .actions,.kta-print-preview-actions .actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}.kta-control .actions button,.kta-print-preview-actions .actions button{width:100%!important;min-height:44px!important;white-space:normal!important;line-height:1.2!important}}

@media print{.rev50-sheet{display:flex!important;flex-direction:row!important;width:297mm!important;height:210mm!important;min-height:210mm!important;margin:0!important;padding:16mm 10mm!important;gap:10mm!important;box-sizing:border-box!important;justify-content:center!important;align-items:flex-start!important;background:#fff!important;overflow:hidden!important}.rev50-card{transform:scale(.377)!important;transform-origin:top left!important;margin-right:-533px!important;margin-bottom:-336px!important;box-shadow:none!important}}



/* ===== Revisi 102: Final fix preview APK, PNG high-res, dan PDF KTA =====

   Semua elemen KTA dikunci dalam kanvas virtual 856 x 540 px per sisi.

   Preview HP diskalakan dari wrapper, bukan dari isi kartu, agar layout tidak pecah. */

.rev50-card{

  font-size:1px!important;

  width:856px!important;

  height:540px!important;

  min-width:856px!important;

  max-width:856px!important;

  aspect-ratio:auto!important;

  position:relative!important;

  overflow:hidden!important;

  flex:0 0 856px!important;

  border-radius:38px!important;

  background-image:url('assets/kta-template-rev56.png')!important;

  background-size:100% 100%!important;

  background-repeat:no-repeat!important;

  background-position:center!important;

  font-family:Arial,Helvetica,sans-serif!important;

  color:#082b57!important;

  contain:layout paint!important;

  -webkit-print-color-adjust:exact!important;

  print-color-adjust:exact!important;

}

.rev50-logo{position:absolute!important;top:41.5px!important;width:114px!important;height:80px!important;display:grid!important;place-items:center!important;z-index:2!important}

.rev50-logo-left{left:78px!important}.rev50-logo-right{right:78px!important}

.rev50-logo img{max-width:100%!important;max-height:100%!important;object-fit:contain!important}.rev50-logo b{font-size:46px!important;color:#0c3365!important;letter-spacing:4px!important}

.rev50-title{position:absolute!important;left:178px!important;right:178px!important;top:84.5px!important;width:auto!important;text-align:center!important;z-index:2!important;display:block!important}

.rev50-title h1{display:block!important;width:100%!important;margin:0!important;color:#071a37!important;font-size:27.2px!important;line-height:1.02!important;font-weight:950!important;letter-spacing:.5px!important;text-align:center!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

.rev50-title p{display:block!important;width:100%!important;margin:5.8px 0 0!important;color:#163b67!important;font-size:16px!important;line-height:1.15!important;font-weight:900!important;text-align:center!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;letter-spacing:0!important}

.rev50-title strong{display:block!important;width:100%!important;margin:4.2px 0 0!important;color:#c9141b!important;font-size:13.5px!important;line-height:1.08!important;font-weight:950!important;text-align:center!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;letter-spacing:.3px!important}

.rev50-badge{position:absolute!important;left:315px!important;right:315px!important;top:168.5px!important;height:32.5px!important;border-radius:999px!important;background:linear-gradient(180deg,#115fb0,#072c63)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-size:15.8px!important;font-weight:950!important;letter-spacing:1px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px rgba(0,0,0,.18)!important;z-index:2!important;white-space:nowrap!important}

.rev50-photo{position:absolute!important;left:83px!important;top:236px!important;width:186px!important;height:242px!important;border:4.5px solid #246cae!important;border-radius:20px!important;overflow:hidden!important;display:grid!important;place-items:center!important;color:#6f7f92!important;background:#eef2f4!important;font-size:25px!important;font-weight:900!important;z-index:2!important}
.rev50-photo img{width:100%!important;height:100%!important;object-fit:cover!important}
.rev50-front-values{position:absolute!important;left:311px!important;top:243.5px!important;width:452px!important;z-index:2!important}
.rev50-row{display:grid!important;grid-template-columns:121px 17px 1fr!important;align-items:center!important;height:29.5px!important;font-size:15.6px!important;line-height:1!important;color:#082b57!important}
.rev50-row b{font-weight:950!important}.rev50-row span{font-weight:950!important;text-align:center!important}.rev50-row strong{font-weight:850!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;border-bottom:1.2px solid rgba(8,43,87,.54)!important;padding-bottom:1.5px!important;min-width:0!important}
.rev50-front .rev50-front-daerah,.rev50-front .rev50-front-no{display:none!important}
.rev50-back-title{top:84.5px!important}.rev50-back-badge{top:168.5px!important}
.rev50-rules{position:absolute!important;top:198px!important;left:80px!important;width:500px!important;max-height:178px!important;overflow:hidden!important;color:#082b57!important;z-index:2!important}
.rev50-rules h2{font-size:19px!important;line-height:1.08!important;margin:0 0 5px!important;letter-spacing:.5px!important;color:#071a37!important;font-weight:950!important}
.rev50-rules ol{font-size:12.8px!important;line-height:1.22!important;padding-left:32px!important;margin:0!important;font-weight:850!important;color:#082b57!important}
.rev50-rules li{margin:2px 0!important;padding-left:1px!important}
.rev50-qr{position:absolute!important;top:232px!important;right:75px!important;width:118px!important;height:137px!important;padding:4.5px!important;background:#fff!important;border:5px solid #0c3d78!important;border-radius:14px!important;display:grid!important;grid-template-rows:1fr auto!important;place-items:center!important;overflow:hidden!important;z-index:2!important}
.rev50-qr img,.rev50-qr canvas,.rev50-qr svg{display:block!important;width:90.5px!important;height:90.5px!important;object-fit:contain!important;image-rendering:pixelated!important}.rev50-qr em{font-style:normal!important;font-size:10.2px!important;font-weight:950!important;color:#0c3d78!important;line-height:1!important;text-align:center!important;letter-spacing:.2px!important}
.rev50-sign{position:absolute!important;text-align:center!important;color:#082b57!important;z-index:2!important}
.rev50-sign-left{left:166px!important;top:382.5px!important;width:180px!important}.rev50-sign-right{left:492px!important;top:382.5px!important;width:180px!important}
.rev50-sign-title{font-size:12.4px!important;line-height:1.02!important;margin-bottom:1.2px!important;font-weight:950!important}.rev50-ttd{height:33.5px!important;max-width:160px!important;object-fit:contain!important;display:block!important;margin:0 auto -2.2px!important}.rev50-sign-line{height:1.6px!important;background:#082b57!important;margin:0 auto 2.5px!important;width:155px!important}.rev50-sign-name{font-size:10.8px!important;line-height:1.03!important;font-weight:950!important;white-space:normal!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;min-height:23px!important}

.rev50-stamp-wrap{position:absolute!important;left:387.5px!important;top:382.5px!important;width:82px!important;height:82px!important;display:grid!important;place-items:center!important;z-index:3!important}.rev50-stamp{max-width:82px!important;max-height:82px!important;object-fit:contain!important}

.rev50-back-address{position:absolute!important;bottom:17.5px!important;left:90px!important;right:90px!important;width:auto!important;color:#111!important;text-shadow:none!important;font-size:10.2px!important;font-weight:750!important;line-height:1.05!important;text-align:center!important;display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;z-index:2!important}

#ktaPreview{overflow:hidden!important;-webkit-overflow-scrolling:touch!important;padding:4px 0 18px!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important}

#ktaPreview .rev50-sheet,

#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

#ktaPreview .rev50-sheet.member-mobile-kta-sheet{

  width:1752px!important;

  height:540px!important;

  min-height:540px!important;

  padding:0!important;

  margin:0 auto!important;

  background:transparent!important;

  display:flex!important;

  flex-direction:row!important;

  align-items:flex-start!important;

  justify-content:flex-start!important;

  gap:40px!important;

  overflow:visible!important;

  transform-origin:top center!important;

  box-sizing:border-box!important;

  flex-wrap:nowrap!important;

}

#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

#ktaPreview .rev50-sheet.member-mobile-kta-sheet{

  width:856px!important;

  height:1096px!important;

  min-height:1096px!important;

  flex-direction:column!important;

  gap:16px!important;

}

#ktaPreview .rev50-card{box-shadow:0 4px 18px rgba(0,0,0,.18)!important;margin:0!important;transform:none!important}

@media print{

  .rev50-card{width:856px!important;height:540px!important;transform:none!important;margin:0!important;box-shadow:none!important}

}





/* ===== Revisi 103: Preview KTA APK mengikuti website =====

   Depan dan belakang selalu sejajar horizontal seperti tampilan website.

   Sheet yang diperkecil, bukan isi kartu. Ini mencegah KTA melebar,

   mencegah bagian belakang terpotong, dan menjaga posisi elemen tetap stabil. */

#ktaPreview.kta-preview-row-mode,

#ktaPreview{

  max-width:100%!important;

  overflow:visible!important;

  -webkit-overflow-scrolling:touch!important;

  background:transparent!important;

}

#ktaPreview.kta-preview-row-mode .rev50-sheet,

#ktaPreview .rev50-sheet,

#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

#ktaPreview .rev50-sheet.member-mobile-kta-sheet{

  display:flex!important;

  flex-direction:row!important;

  flex-wrap:nowrap!important;

  align-items:flex-start!important;

  justify-content:flex-start!important;

  width:1726px!important;

  height:540px!important;

  min-height:540px!important;

  padding:0!important;

  margin-left:auto!important;

  margin-right:auto!important;

  background:transparent!important;

  overflow:visible!important;

  box-sizing:border-box!important;

  transform-origin:top center!important;

}

#ktaPreview.kta-preview-row-mode .rev50-card,

#ktaPreview .rev50-card{

  width:856px!important;

  height:540px!important;

  min-width:856px!important;

  max-width:856px!important;

  flex:0 0 856px!important;

  aspect-ratio:auto!important;

  transform:none!important;

  margin:0!important;

  box-sizing:border-box!important;

}

@media screen and (max-width:900px){

  #ktaPreview .rev50-sheet,

  #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

  #ktaPreview .rev50-sheet.member-mobile-kta-sheet{

    flex-direction:row!important;

    width:1726px!important;

    height:540px!important;

    min-height:540px!important;

    padding:0!important;

    gap:14px!important;

    overflow:visible!important;

  }

  #ktaPreview .rev50-card{

    width:856px!important;

    height:540px!important;

    min-width:856px!important;

    max-width:856px!important;

    flex:0 0 856px!important;

    transform:none!important;

  }

}



/* ===== Revisi 104: Filter KTA tampil di bawah dan export tidak muncul di layar ===== */

#ktaPreview.kta-filter-preview,

#ktaPreview.kta-preview-row-mode,

#ktaPreview{

  display:block!important;

  width:100%!important;

  max-width:100%!important;

  overflow:visible!important;

  background:transparent!important;

  padding:4px 0 22px!important;

}

#ktaPreview .kta-preview-item{

  width:100%!important;

  display:flex!important;

  justify-content:center!important;

  align-items:flex-start!important;

  overflow:visible!important;

  background:transparent!important;

  margin:0 auto 18px!important;

  box-sizing:border-box!important;

}

#ktaPreview .kta-preview-item .rev50-sheet{

  display:flex!important;

  flex-direction:row!important;

  flex-wrap:nowrap!important;

  align-items:flex-start!important;

  justify-content:flex-start!important;

  background:transparent!important;

  overflow:visible!important;

  transform-origin:top center!important;

  box-sizing:border-box!important;

}

.kta-export-host{

  position:fixed!important;

  left:0!important;

  top:calc(100vh + 32px)!important;

  width:1712px!important;

  height:540px!important;

  overflow:visible!important;

  pointer-events:none!important;

  background:transparent!important;

  z-index:-2147483647!important;

}

.kta-export-host .rev50-sheet{

  box-shadow:none!important;

  background:transparent!important;

}



/* ===== Revisi 105: Keterangan status anggota tidak aktif ===== */

.inactive-reason-field{

  border:1px solid #fecaca;

  background:#fff8f8;

  border-radius:14px;

  padding:10px;

}

.inactive-reason-field span{

  color:#991b1b!important;

}

.inactive-reason-field small{

  font-size:11px;

  color:#7f1d1d;

  line-height:1.3;

}

.inactive-reason-field select{

  border-color:#fca5a5!important;

  background:#fff!important;

}

.member-status-inactive{

  background:#fee2e2!important;

  color:#991b1b!important;

}

.member-status-active{

  background:#dcfce7!important;

  color:#166534!important;

}

.inactive-reason-badge{

  display:block;

  margin-top:4px;

  font-size:10.5px;

  font-weight:800;

  line-height:1.2;

  color:#991b1b;

}

@media print{

  .inactive-reason-field{display:none!important;}

}



/* ===== Revisi 73: Center text small pada login card ===== */

.login-card small {

  text-align: center !important;

  color: #08335f !important;

  font-weight: 750 !important;

}



/* ===== Revisi 74: Login card glassmorphism more transparent ===== */

.login-card {

  background: rgba(255, 255, 255, 0.22) !important;

  backdrop-filter: blur(2px) !important;

  -webkit-backdrop-filter: blur(2px) !important;

}



/* ===== Revisi 75: Keterbacaan teks pada form login transparan ===== */

.btn-forgot-password {

  background: #eef4fc !important;

  color: #08335f !important;

  border: 1px solid #c8dcf5 !important;

  font-weight: 800 !important;

}

.btn-forgot-password:hover {

  background: #dbeafe !important;

}

.login-card p, .member-login-help {

  color: #08335f !important;

  font-weight: 700 !important;

}





/* Workflow KTA Digital */

.kta-workflow-card{max-width:860px!important;width:min(94vw,860px)!important;max-height:92vh;overflow:auto;}

.kta-workflow-card .grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}

.revision-result{margin-top:14px;}

.pending-kta{font-weight:800;color:#92400e;background:#fef3c7;border-radius:999px;padding:4px 10px;display:inline-block;}

@media(max-width:760px){.kta-workflow-card .grid.two{grid-template-columns:1fr;}}





/* ========================================================= */

/* TATA LETAK TEMPLATE 1: HOLOGRAPHIC HUD (CYBERPUNK SCI-FI)  */

/* ========================================================= */

.layout-hud .sidebar {

  background: #06090f !important;

  border-right: 2px solid #00f2fe !important;

  box-shadow: 0 0 20px rgba(0, 242, 254, 0.15) !important;

  font-family: 'Courier New', Courier, monospace !important;

}

.layout-hud .sidebar .brand-panel strong {

  color: #00f2fe !important;

  text-shadow: 0 0 8px rgba(0, 242, 254, 0.8) !important;

  font-size: 15px !important;

  letter-spacing: 1px !important;

}

.layout-hud .sidebar .brand-panel small {

  color: #ff6b00 !important;

  font-weight: bold !important;

  text-shadow: 0 0 4px rgba(255, 107, 0, 0.5) !important;

}

.layout-hud .sidebar .role-badge {

  border: 1px dashed #ff6b00 !important;

  background: rgba(255, 107, 0, 0.05) !important;

  border-radius: 4px !important;

  color: #ff6b00 !important;

  text-shadow: 0 0 4px rgba(255, 107, 0, 0.3) !important;

}

.layout-hud .sidebar nav button {

  border-radius: 0 !important;

  border: 1px solid rgba(0, 242, 254, 0.15) !important;

  background: rgba(0, 242, 254, 0.02) !important;

  color: #a5f3fc !important;

  margin-bottom: 4px !important;

  transition: all 0.2s ease !important;

}

.layout-hud .sidebar nav button:hover {

  background: rgba(0, 242, 254, 0.12) !important;

  border-color: #00f2fe !important;

  box-shadow: 0 0 10px rgba(0, 242, 254, 0.3) !important;

  transform: translateX(4px) !important;

}

.layout-hud .sidebar nav button.active {

  background: rgba(255, 107, 0, 0.15) !important;

  border-color: #ff6b00 !important;

  color: #fff !important;

  box-shadow: 0 0 12px rgba(255, 107, 0, 0.4) !important;

}

.layout-hud .sidebar nav button.active .nav-ic {

  color: #ff6b00 !important;

}

.layout-hud .sidebar nav .menu-group-head {

  color: #00f2fe !important;

  letter-spacing: 0.12em !important;

  border-bottom: 1px solid rgba(0, 242, 254, 0.2) !important;

  margin-top: 10px !important;

}

.layout-hud .sidebar-copyright {

  font-family: monospace !important;

  color: #555 !important;

  text-align: center !important;

}

/* HUD styling elements inside content */

.layout-hud .card {

  border: 1px solid rgba(0, 242, 254, 0.2) !important;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;

  border-radius: 8px !important;

}

.layout-hud .card h3 {

  color: #0c4a6e !important;

  font-weight: 800 !important;

  border-bottom: 2px solid rgba(0, 242, 254, 0.2) !important;

  padding-bottom: 6px !important;

}

.layout-hud .dash-hero {

  border: 2px solid #00f2fe !important;

  background: #0f172a !important;

  color: #00f2fe !important;

  box-shadow: 0 0 15px rgba(0, 242, 254, 0.2) !important;

  border-radius: 8px !important;

}

.layout-hud .dash-hero p {

  color: #a5f3fc !important;

}

.layout-hud .stat {

  border: 1px solid rgba(255, 107, 0, 0.3) !important;

  border-left: 5px solid #ff6b00 !important;

  border-radius: 8px !important;

}





/* ========================================================= */

/* TATA LETAK TEMPLATE 3: TACTILE BENTO GRID & DOCK          */

/* ========================================================= */

@media screen and (min-width: 901px) {

  /* Ubah layout grid utama menjadi compact dock (lebar 68px) */

  .app.layout-bento {

    grid-template-columns: 68px 1fr !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

  }

  

  /* Sidebar compact melayang */

  .layout-bento .sidebar {

    width: 68px !important;

    padding: 20px 8px !important;

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    z-index: 1000 !important;

    position: fixed !important;

    left: 0;

    top: 0;

    bottom: 0;

    height: 100vh !important;

    background: #0f172a !important;

    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08) !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;

  }

  

  /* Efek membesar saat di-hover */

  .layout-bento .sidebar:hover {

    width: 260px !important;

  }

  

  /* Sembunyikan tulisan menu dan brand label saat ringkas, tampilkan saat hover */

  .layout-bento .sidebar nav button span,

  .layout-bento .sidebar .brand-panel strong,

  .layout-bento .sidebar .brand-panel small,

  .layout-bento .sidebar .brand-panel .sidebar-identity-label,

  .layout-bento .sidebar .brand-panel .brand-logos img:last-child {

    opacity: 0;

    transition: opacity 0.15s ease !important;

    pointer-events: none;

  }

  

  .layout-bento .sidebar:hover nav button span,

  .layout-bento .sidebar:hover .brand-panel strong,

  .layout-bento .sidebar:hover .brand-panel small,

  .layout-bento .sidebar:hover .brand-panel .sidebar-identity-label,

  .layout-bento .sidebar:hover .brand-panel .brand-logos img:last-child {

    opacity: 1;

    pointer-events: auto;

  }

  

  .layout-bento .sidebar nav button {

    justify-content: center !important;

    padding: 11px !important;

  }

  

  .layout-bento .sidebar:hover nav button {

    justify-content: flex-start !important;

  }

  

  .layout-bento .sidebar nav button .nav-ic {

    margin: 0 !important;

  }

  

  .layout-bento .sidebar:hover nav button .nav-ic {

    margin-right: 10px !important;

  }

  

  /* Bento Grid Stats tactile effect */

  .layout-bento .stat {

    border: 0 !important;

    box-shadow: 6px 6px 12px #e2e8f0, -6px -6px 12px #ffffff !important;

    background: #f8fafc !important;

    border-radius: 20px !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease !important;

  }

  .layout-bento .stat:hover {

    transform: translateY(-4px) !important;

    box-shadow: 8px 8px 16px #cbd5e1, -8px -8px 16px #ffffff !important;

  }

  .layout-bento .card {

    border: 0 !important;

    background: #ffffff !important;

    box-shadow: 8px 8px 24px rgba(15, 23, 42, 0.06) !important;

    border-radius: 24px !important;

  }

}



/* ===== Audit Request Profile Card Full Screen on Mobile ===== */

@media screen and (max-width: 900px) {

  .modal-shell:not(.hidden) .modal-card.request-profile-card {

    width: 100vw !important;

    max-width: 100vw !important;

    height: 100dvh !important;

    max-height: 100dvh !important;

    min-height: 100dvh !important;

    margin: 0 !important;

    border-radius: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;

    padding: 24px 20px !important;

  }

}



/* ===== Responsive Selectors & Topbar Bell Icon Spacing ===== */

@media (max-width: 900px) {

  .topbar-actions .layout-selector-el,

  

  .topbar-actions button[onclick="refreshAll()"] {

    display: none !important;

  }

  .sidebar-selectors {

    display: flex !important;

  }

}

@media (min-width: 901px) {

  .sidebar-selectors {

    display: none !important;

  }

}



/* ===== REDESIGN DASHBOARD ANGGOTA (FINTECH LOOK) ===== */



/* Global Member App Layout Overrides on Mobile */

@media (max-width: 900px) {

  .app.member-app .topbar {

    display: none !important;

  }

  .app.member-app .sidebar {

    display: none !important;

  }

  .app.member-app #sidebarBackdrop {

    display: none !important;

  }

  .app.member-app .content {

    padding: 20px 20px 100px !important; /* Extra bottom padding for bottom nav */

    background: linear-gradient(180deg, #f0f6fc 0%, #ffffff 100%) !important;

    min-height: 100dvh !important;

  }

}



/* Header Section */

.member-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 24px;

  padding-top: 8px;

}

.member-greeting {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.greeting-subtitle {

  font-size: 14px;

  color: var(--muted);

  font-weight: 600;

}

.greeting-title {

  font-size: 24px;

  color: #071a37;

  font-weight: 800;

  margin: 0;

}

.status-badge-wrapper {

  margin-top: 4px;

}

.status-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 10px;

  border-radius: 99px;

  font-size: 11px;

  font-weight: 800;

}

.status-badge.active {

  background: #dcfce7;

  color: #15803d;

}

.status-badge.inactive {

  background: #fee2e2;

  color: #b91c1c;

}

.status-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: currentColor;

}

.member-header-actions {

  position: relative;

}

.member-notification-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  display: grid;

  place-items: center;

  font-size: 20px;

  cursor: pointer;

  position: relative;

  color: #071a37 !important;

  padding: 0 !important;

}

.member-notification-count {

  position: absolute;

  top: -2px;

  right: -2px;

  background: #ef4444;

  color: #ffffff;

  font-size: 10px;

  font-weight: 800;

  min-width: 18px;

  height: 18px;

  border-radius: 99px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #ffffff;

  padding: 0 4px;

}



/* 3D KTA Card Flip */

.kta-flip-wrapper {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: visible;

  height: calc(540px * var(--member-card-scale)) !important;

  margin-bottom: 12px;

}

.kta-flip-sizer {

  width: calc(856px * var(--member-card-scale)) !important;

  height: calc(540px * var(--member-card-scale)) !important;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: visible;

  position: relative;

}

.kta-flip-container {

  width: 856px !important;

  height: 540px !important;

  perspective: 1000px;

  position: absolute !important;

  left: 0 !important;

  top: 0 !important;

  transform: scale(var(--member-card-scale)) !important;

  transform-origin: top left !important;

  cursor: pointer;

  flex-shrink: 0 !important;

}

.kta-flip-card {

  position: relative;

  width: 100%;

  height: 100%;

  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  transform-style: preserve-3d;

}

.kta-flip-container.flipped .kta-flip-card {

  transform: rotateY(180deg);

}

.kta-flip-front, .kta-flip-back {

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  top: 0;

  left: 0;

}

.kta-flip-back {

  transform: rotateY(180deg);

}

.kta-flip-hint {

  text-align: center;

  font-size: 12px;

  color: var(--muted);

  margin-top: 8px;

  margin-bottom: 28px;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  opacity: 0.8;

}

.kta-flip-hint svg {

  animation: spinCardHint 3s infinite linear;

}

@keyframes spinCardHint {

  0% { transform: rotate(0deg); }

  50% { transform: rotate(180deg); }

  100% { transform: rotate(360deg); }

}



/* Quick Access Grid Section */

.quick-access-section {

  margin-bottom: 28px;

}

.quick-access-section h3,

.info-section h3 {

  font-size: 16px;

  font-weight: 800;

  color: #071a37;

  margin: 0 0 14px;

}

.quick-access-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

}

.quick-card {

  background: #ffffff;

  border-radius: 16px;

  padding: 16px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  cursor: pointer;

  border: 1px solid #f1f5f9;

  box-shadow: 0 4px 12px rgba(15,23,42,0.02);

  transition: all 0.2s ease;

}

.quick-card:active {

  transform: scale(0.96);

  filter: brightness(0.95);

}

.quick-icon {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  transition: transform 0.2s ease;

}

.quick-card:hover .quick-icon {

  transform: translateY(-2px);

}

.quick-label {

  font-size: 13px;

  font-weight: 700;

  color: #334155;

  text-align: center;

}



/* Color palettes for quick cards */

.card-blue .quick-icon {

  background: rgba(18, 103, 189, 0.1);

  color: #1267bd;

}

.card-blue {

  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);

  border-left: 3px solid #1267bd;

}

.card-green .quick-icon {

  background: rgba(22, 163, 74, 0.1);

  color: #16a34a;

}

.card-green {

  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);

  border-left: 3px solid #16a34a;

}

.card-orange .quick-icon {

  background: rgba(234, 88, 12, 0.1);

  color: #ea580c;

}

.card-orange {

  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);

  border-left: 3px solid #ea580c;

}

.card-purple .quick-icon {

  background: rgba(147, 51, 234, 0.1);

  color: #9333ea;

}

.card-purple {

  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);

  border-left: 3px solid #9333ea;

}



/* Latest Info Section */

.info-section {

  margin-bottom: 28px;

}

.info-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.info-card {

  background: #ffffff;

  border-radius: 14px;

  padding: 14px;

  display: flex;

  align-items: flex-start;

  gap: 12px;

  border: 1px solid #f1f5f9;

  box-shadow: 0 4px 12px rgba(15,23,42,0.02);

}

.info-card-icon {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  background: #f1f5f9;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  flex-shrink: 0;

}

.info-card-content {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.info-card-content h4 {

  font-size: 14px;

  font-weight: 700;

  color: #071a37;

  margin: 0;

}

.info-card-content p {

  font-size: 12px;

  color: var(--muted);

  margin: 0;

  line-height: 1.4;

}

.info-card-content .info-date {

  font-size: 10px;

  color: #94a3b8;

  font-weight: 500;

  margin-top: 4px;

}



/* Bottom Navigation Bar */

.bottom-nav {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: 72px;

  background: linear-gradient(135deg, #071a37, #0c254b);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 -8px 32px rgba(7, 26, 55, 0.25);

  display: flex;

  justify-content: space-around;

  align-items: center;

  padding: 0 10px;

  z-index: 1000;

}

.nav-item {

  background: transparent !important;

  color: #8fa9d4 !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  height: 100%;

  flex: 1;

  padding: 0 !important;

  border-radius: 0 !important;

  font-weight: 600;

}

.nav-item:hover {

  filter: none;

}

.nav-item.active {

  color: #e6b034 !important; /* Premium Gold */

}

.nav-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s ease;

}

.nav-item.active .nav-icon {

  transform: translateY(-2px);

}

.nav-label {

  font-size: 10px;

  font-weight: 700;

}

.nav-scan-wrapper {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  height: 100%;

  padding-bottom: 8px;

  flex: 1;

}

.nav-scan-btn {

  position: absolute;

  top: -24px;

  left: 50%;

  transform: translateX(-50%);

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: linear-gradient(135deg, #e6b034, #b8860b) !important;

  box-shadow: 0 8px 24px rgba(230, 176, 52, 0.4);

  border: 4px solid #071a37 !important;

  display: grid;

  place-items: center;

  color: #071a37 !important;

  z-index: 1001;

  padding: 0 !important;

  transition: all 0.2s ease;

}

.nav-scan-btn:active {

  transform: translateX(-50%) scale(0.9);

  box-shadow: 0 4px 10px rgba(230, 176, 52, 0.25);

}

.scan-icon {

  display: flex;

  align-items: center;

  justify-content: center;

}

.scan-label {

  color: #8fa9d4;

  margin-top: 2px;

}



/* Simulated Scanner Styles */

.scanner-modal {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(7, 26, 55, 0.85);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  z-index: 2000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

}

.scanner-container {

  width: 100%;

  max-width: 400px;

  background: #ffffff;

  border-radius: 24px;

  padding: 24px;

  box-shadow: 0 20px 50px rgba(0,0,0,0.3);

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.scanner-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.scanner-header h3 {

  margin: 0;

  font-size: 18px;

  color: #071a37;

  font-weight: 800;

}

.scanner-close-btn {

  background: #f1f5f9 !important;

  color: #475569 !important;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-size: 20px;

  padding: 0 !important;

}

.scanner-viewfinder {

  position: relative;

  width: 100%;

  aspect-ratio: 1;

  background: #020617;

  border-radius: 16px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}

.scanner-laser {

  position: absolute;

  left: 0;

  right: 0;

  height: 2px;

  background: #ef4444;

  box-shadow: 0 0 10px #ef4444, 0 0 20px #ef4444;

  animation: scanLaserAnim 2.5s infinite ease-in-out;

  z-index: 2;

}

@keyframes scanLaserAnim {

  0% { top: 10%; }

  50% { top: 90%; }

  100% { top: 10%; }

}

.scanner-corners {

  position: absolute;

  inset: 40px;

  border: 2px dashed rgba(255,255,255,0.4);

  border-radius: 8px;

}

.scanner-corners::before,

.scanner-corners::after {

  content: '';

  position: absolute;

  width: 20px;

  height: 20px;

  border: 4px solid #1267bd;

}

.scanner-corners::before {

  top: -4px;

  left: -4px;

  border-right: 0;

  border-bottom: 0;

  border-top-left-radius: 8px;

}

.scanner-corners::after {

  top: -4px;

  right: -4px;

  border-left: 0;

  border-bottom: 0;

  border-top-right-radius: 8px;

}

/* Bottom corners */

.scanner-viewfinder::before,

.scanner-viewfinder::after {

  content: '';

  position: absolute;

  width: 20px;

  height: 20px;

  border: 4px solid #1267bd;

  z-index: 1;

}

.scanner-viewfinder::before {

  bottom: 36px;

  left: 36px;

  border-right: 0;

  border-top: 0;

  border-bottom-left-radius: 8px;

}

.scanner-viewfinder::after {

  bottom: 36px;

  right: 36px;

  border-left: 0;

  border-top: 0;

  border-bottom-right-radius: 8px;

}

.scanner-tip {

  position: absolute;

  bottom: 12px;

  left: 12px;

  right: 12px;

  text-align: center;

  color: rgba(255,255,255,0.8);

  font-size: 11px;

  font-weight: 500;

  z-index: 3;

  background: rgba(0,0,0,0.6);

  padding: 6px 10px;

  border-radius: 8px;

  backdrop-filter: blur(4px);

}

.scanner-actions {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.scanner-actions button {

  width: 100%;

}

.scanner-manual-input-group {

  display: flex;

  gap: 8px;

  margin-top: 10px;

  border-top: 1px solid #e2e8f0;

  padding-top: 14px;

}

.scanner-manual-input-group input {

  flex: 1;

  padding: 10px 14px;

  border: 1px solid #cbd5e1;

  border-radius: 12px;

  font-size: 13px;

  outline: none;

}

.scanner-manual-input-group button {

  width: auto;

  flex-shrink: 0;

}/* Scoped Member App Bright and Vibrant Wallet Theme Override */

.app.member-app .content {

  background: linear-gradient(135deg, #f0f4f9 0%, #eef2f7 100%) !important;

  color: #0f172a !important;

  padding-bottom: 120px !important;

}



.app.member-app .member-greeting .greeting-subtitle {

  color: #475569 !important;

}



.app.member-app .member-greeting .greeting-title {

  color: #071a37 !important;

}



.app.member-app .member-notification-btn {

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  color: #071a37 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;

}



.app.member-app .quick-access-section h3,

.app.member-app .info-section h3 {

  color: #071a37 !important;

}



.app.member-app .quick-card {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



.app.member-app .quick-card:active {

  transform: scale(0.96) !important;

  filter: brightness(0.97) !important;

}



.app.member-app .quick-label {

  color: #334155 !important;

}



/* Dynamic color palettes with transparent glow effect for grid menus */

.app.member-app .card-blue .quick-icon {

  background: rgba(59, 130, 246, 0.1) !important;

  color: #1d4ed8 !important;

}

.app.member-app .card-blue {

  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;

  border-left: 4px solid #3b82f6 !important;

  border: 1px solid rgba(59, 130, 246, 0.18) !important;

  border-left-width: 4px !important;

}



.app.member-app .card-green .quick-icon {

  background: rgba(34, 197, 94, 0.1) !important;

  color: #15803d !important;

}

.app.member-app .card-green {

  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;

  border-left: 4px solid #22c55e !important;

  border: 1px solid rgba(34, 197, 94, 0.18) !important;

  border-left-width: 4px !important;

}



.app.member-app .card-orange .quick-icon {

  background: rgba(249, 115, 22, 0.1) !important;

  color: #c2410c !important;

}

.app.member-app .card-orange {

  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;

  border-left: 4px solid #f97316 !important;

  border: 1px solid rgba(249, 115, 22, 0.18) !important;

  border-left-width: 4px !important;

}



.app.member-app .card-purple .quick-icon {

  background: rgba(168, 85, 247, 0.1) !important;

  color: #7e22ce !important;

}

.app.member-app .card-purple {

  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;

  border-left: 4px solid #a855f7 !important;

  border: 1px solid rgba(168, 85, 247, 0.18) !important;

  border-left-width: 4px !important;

}



/* Latest Info list overrides with dynamic distinct backgrounds */

.app.member-app .info-card {

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



.app.member-app .info-card:nth-child(1) {

  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;

  border: 1px solid rgba(34, 197, 94, 0.18) !important;

  border-left: 4px solid #22c55e !important;

}

.app.member-app .info-card:nth-child(1) .info-card-icon {

  background: rgba(34, 197, 94, 0.1) !important;

  color: #15803d !important;

}



.app.member-app .info-card:nth-child(2) {

  background: linear-gradient(135deg, #ffffff 0%, #fffde6 100%) !important;

  border: 1px solid rgba(242, 201, 76, 0.25) !important;

  border-left: 4px solid #f2c94c !important;

}

.app.member-app .info-card:nth-child(2) .info-card-icon {

  background: rgba(242, 201, 76, 0.15) !important;

  color: #855d00 !important;

}



.app.member-app .info-card:nth-child(3) {

  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;

  border: 1px solid rgba(59, 130, 246, 0.18) !important;

  border-left: 4px solid #3b82f6 !important;

}

.app.member-app .info-card:nth-child(3) .info-card-icon {

  background: rgba(59, 130, 246, 0.1) !important;

  color: #1d4ed8 !important;

}



.app.member-app .info-card-content h4 {

  color: #071a37 !important;

}



.app.member-app .info-card-content p {

  color: #475569 !important;

}



.app.member-app .info-card-content .info-date {

  color: #64748b !important;

}



/* Light themed Bottom Navigation overrides - Now premium dark */

.app.member-app .bottom-nav {

  background: linear-gradient(135deg, #071a37, #0c254b) !important;

  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

  box-shadow: 0 -8px 32px rgba(7, 26, 55, 0.25) !important;

}



.app.member-app .nav-item {

  color: #8fa9d4 !important;

}



.app.member-app .nav-item.active {

  color: #e6b034 !important; /* Premium Gold */

}



.app.member-app .nav-scan-btn {

  background: linear-gradient(135deg, #e6b034, #b8860b) !important;

  border: 4px solid #071a37 !important;

  box-shadow: 0 8px 24px rgba(230, 176, 52, 0.3) !important;

  color: #071a37 !important;

}



.app.member-app .kta-flip-hint {

  color: #667085 !important;

}



/* Scoped Member App overrides for all other subpages (Profiles, Edit, Change Password) */

.app.member-app .card {

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  color: #0f172a !important;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



.app.member-app .card h3,

.app.member-app .card h4,

.app.member-app .card p,

.app.member-app .card b,

.app.member-app .card strong,

.app.member-app .card span {

  color: #0f172a !important;

}



.app.member-app .field span {

  color: #334155 !important;

}



.app.member-app .field input,

.app.member-app .field select,

.app.member-app .field textarea {

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  color: #0f172a !important;

}



.app.member-app .field input:focus,

.app.member-app .field select:focus,

.app.member-app .field textarea:focus {

  border-color: #1267bd !important;

  outline: none !important;

}



.app.member-app table {

  background: #ffffff !important;

  color: #0f172a !important;

}



.app.member-app th {

  background: #f6f8fb !important;

  color: #334155 !important;

  border-bottom: 1px solid #eef2f7 !important;

}



.app.member-app td {

  border-bottom: 1px solid #eef2f7 !important;

  color: #0f172a !important;

}



.app.member-app tr:hover td {

  background: #fafcff !important;

}



.app.member-app .history-editor-section h3 {

  color: #0f172a !important;

}



.app.member-app .btn-secondary {

  background: #e8eef8 !important;

  color: #082b57 !important;

}

.app.member-app .btn-secondary:hover {

  background: #d0e0f5 !important;

}



.app.member-app {

  --history-bg: #fafcff !important;

}



.profile-photo-edit-btn {

  transition: transform 0.2s ease, filter 0.2s ease;

}



.profile-photo-edit-btn:hover {

  filter: brightness(1.15) !important;

  transform: scale(1.08) !important;

}



.profile-photo:hover {

  opacity: 0.9;

  filter: brightness(1.05);

  transition: all 0.2s ease;

}



/* ===== Promo Modal Styles (BPJS BPU Modal) ===== */

.promo-card-wrapper {

  position: relative;

  width: min(390px, 92vw);

  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);

  border-radius: 28px;

  box-shadow: 0 24px 70px rgba(7, 26, 55, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.8);

  overflow: hidden;

  animation: promoPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  display: flex;

  flex-direction: column;

}



@keyframes promoPop {

  0% { transform: scale(0.9) translateY(20px); opacity: 0; }

  100% { transform: scale(1) translateY(0); opacity: 1; }

}



.promo-close {

  position: absolute;

  top: 14px;

  right: 14px;

  z-index: 100;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: rgba(15, 23, 42, 0.08);

  border: 0;

  color: #334155;

  font-size: 20px;

  font-weight: 800;

  cursor: pointer;

  display: grid;

  place-items: center;

  transition: all 0.2s ease;

  line-height: 1;

}



.promo-close:hover {

  background: rgba(15, 23, 42, 0.16);

  color: #000000;

  transform: rotate(90deg);

}



.promo-card-content {

  display: flex;

  flex-direction: column;

}



.promo-header {

  text-align: center;

  padding: 24px 20px 12px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

}



.promo-logo-group {

  margin-bottom: 2px;

}



.bpjs-logo-text {

  font-size: 11px;

  font-weight: 800;

  color: #1267bd;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  background: rgba(18, 103, 189, 0.08);

  padding: 4px 10px;

  border-radius: 99px;

}



.promo-header h2 {

  font-size: 20px;

  font-weight: 900;

  color: #071a37;

  margin: 4px 0;

  line-height: 1.25;

}



.promo-price-tag {

  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: 2px;

  background: linear-gradient(90deg, rgba(18,103,189,0.05), rgba(18,103,189,0.12), rgba(18,103,189,0.05));

  width: 100%;

  padding: 6px 0;

  border-radius: 12px;

  margin: 4px 0;

}



.price-value {

  font-size: 32px;

  font-weight: 950;

  color: #1267bd;

  letter-spacing: -0.5px;

}



.price-per {

  font-size: 14px;

  font-weight: 800;

  color: #64748b;

}



.promo-subtitle {

  font-size: 12.5px;

  font-weight: 800;

  color: #334155;

  margin: 0;

}



.promo-period {

  font-size: 10.5px;

  color: #64748b;

  margin: 0;

  font-weight: 700;

}



.promo-body {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.promo-worker-section {

  width: 100%;

  height: 144px;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  background: radial-gradient(circle, rgba(18, 103, 189, 0.06) 0%, transparent 70%);

}



.promo-worker-img {

  height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 8px 16px rgba(18, 103, 189, 0.15));

}



.promo-details-section {

  padding: 0 24px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.promo-program-badge {

  text-align: center;

  font-size: 11px;

  font-weight: 800;

  color: #475569;

}



.program-badges {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 5px;

}



.program-badges .badge {

  font-size: 10.5px;

  font-weight: 800;

  padding: 4px 10px;

  border-radius: 99px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.03);

}



.program-badges .badge.jkk {

  background: #e0f2fe;

  color: #0369a1;

  border: 1px solid #bae6fd;

}



.program-badges .badge.jkm {

  background: #f3e8ff;

  color: #6b21a8;

  border: 1px solid #e9d5ff;

}



.promo-benefits-list {

  list-style: none;

  padding: 0;

  margin: 4px 0 0;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.promo-benefits-list li {

  font-size: 12px;

  line-height: 1.35;

  color: #334155;

  display: flex;

  align-items: flex-start;

  gap: 8px;

}



.promo-benefits-list li::before {

  content: "\2705";

  font-size: 12px;

  flex-shrink: 0;

}



.promo-benefits-list li b {

  color: #0f172a;

}



.promo-footer {

  padding: 16px 24px 24px;

  text-align: center;

  display: flex;

  flex-direction: column;

  gap: 12px;

  align-items: center;

}



.promo-cta-btn {

  width: 100%;

  padding: 13px;

  border-radius: 99px;

  background: linear-gradient(135deg, #1267bd, #08335f) !important;

  color: #ffffff !important;

  font-size: 14.5px;

  font-weight: 900;

  border: 0;

  cursor: pointer;

  box-shadow: 0 8px 24px rgba(18, 103, 189, 0.35);

  transition: all 0.2s ease;

}



.promo-cta-btn:hover {

  filter: brightness(1.1);

  transform: translateY(-1.5px);

  box-shadow: 0 10px 28px rgba(18, 103, 189, 0.45);

}



.promo-cta-btn:active {

  transform: translateY(0);

  box-shadow: 0 4px 12px rgba(18, 103, 189, 0.25);

}



.promo-footnote {

  font-size: 9px;

  color: #94a3b8;

  margin: 0;

  line-height: 1.3;

  max-width: 290px;

}



/* Ensure the member app content has extra bottom padding on all screens, especially mobile, to prevent bottom nav from covering content */

body.session-authenticated #app.member-app:not(.hidden) .content {

  padding-bottom: 120px !important;

}



/* Force KTA Card text elements to be dark blue/red and clear on the light template background */

.rev50-card,

.rev50-card b,

.rev50-card span,

.rev50-card strong,

.rev50-card h1,

.rev50-card h2,

.rev50-card p,

.rev50-card li,

.rev50-card ol {

  color: inherit;

}



.rev50-row {

  color: #082b57 !important;

}

.rev50-row b,

.rev50-row span,

.rev50-row strong {

  color: #082b57 !important;

}



.rev50-title h1 {

  color: #071a37 !important;

}

.rev50-title p {

  color: #163b67 !important;

}

.rev50-title strong {

  color: #c9141b !important;

}

.rev50-rules,

.rev50-rules h2,

.rev50-rules ol,

.rev50-rules li {

  color: #082b57 !important;

}

.rev50-sign,

.rev50-sign-title,

.rev50-sign-name {

  color: #082b57 !important;

}

.rev50-back-address {

  color: #111111 !important;

}



/* Profile History Tabbed Layout Styles */

.profile-tabs-container {

  margin-top: 20px;

  width: 100%;

}

.profile-tabs-header {

  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding-bottom: 10px;

  margin-bottom: 14px;

  border-bottom: 1px solid var(--line);

  -webkit-overflow-scrolling: touch;

}

.profile-tabs-header::-webkit-scrollbar {

  height: 4px;

}

.profile-tabs-header::-webkit-scrollbar-thumb {

  background: var(--line);

  border-radius: 2px;

}

.profile-tab-btn {

  padding: 8px 16px;

  background: var(--soft);

  border: 1px solid var(--line);

  border-radius: 10px;

  font-size: 13px;

  font-weight: 700;

  color: var(--navy);

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.2s ease;

}

.profile-tab-btn:hover {

  background: var(--line);

}

.profile-tab-btn.active {

  background: var(--blue) !important;

  color: #ffffff !important;

  border-color: var(--blue) !important;

  box-shadow: 0 4px 10px rgba(0, 82, 204, 0.2);

}

.profile-tab-content {

  animation: fadeIn 0.25s ease-in-out;

}



/* Profile Accordion Styles */

.profile-accordion-card {

  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 18px !important;

  border: 1px solid var(--line) !important;

  background: #ffffff !important;

}

.profile-accordion-header {

  width: 100%;

  background: none;

  border: none;

  padding: 16px 18px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: inherit;

  font-size: 15px;

  font-weight: 700;

  color: var(--navy);

  cursor: pointer;

  text-align: left;

  transition: background 0.2s ease;

  outline: none;

}

.profile-accordion-header:hover {

  background: var(--soft);

}

.profile-accordion-header.active {

  border-bottom: 1px solid var(--line);

  background: var(--soft);

}

.profile-accordion-content {

  padding: 18px;

  animation: fadeIn 0.2s ease-in-out;

}

.accordion-arrow {

  font-size: 12px;

  color: var(--muted);

}











/* =========================================================

   Revisi 106 — Nuansa merah-putih, kartu anggota, dan foto terpisah

   Tidak memodifikasi warna artwork KTA yang dicetak.

   ========================================================= */

:root{

  --primary-red:#C8102E;

  --primary-red-dark:#A30D25;

  --secondary-red:#FF4D4D;

  --soft-red:#FFF5F5;

  --neutral-bg:#F8F8F8;

  --line-red:#F3C3CA;

  --blue:var(--primary-red);

  --ui-blue:var(--primary-red);

  --ui-deep:#8F0C21;

  --ui-red:var(--primary-red);

}

body{background:var(--neutral-bg)!important;}

.sidebar{background:linear-gradient(180deg,#C8102E 0%,#A30D25 100%)!important;}

.brand-panel{background:linear-gradient(135deg,#fff 0%,#FFF5F5 100%)!important;border-bottom-color:var(--primary-red)!important;color:#8F0C21!important;}

.sidebar nav button{border-color:rgba(255,255,255,.25)!important;color:#fff!important;}

.sidebar nav button:hover,.sidebar nav button.active{background:rgba(255,255,255,.16)!important;}

.topbar h2,.card h3,.quick-access-section h3,.info-section h3{color:#8F0C21!important;}

button{background:linear-gradient(135deg,var(--primary-red),var(--primary-red-dark))!important;}

button.btn-secondary,.btn-secondary{background:#FFF5F5!important;color:#9D1128!important;border:1px solid var(--line-red)!important;}

.card{background:#fff!important;border:1px solid var(--line-red)!important;box-shadow:0 10px 26px rgba(152,14,36,.08)!important;}

.card:hover{box-shadow:0 14px 32px rgba(152,14,36,.12)!important;}

.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid rgba(200,16,46,.18);border-color:var(--primary-red)!important;}

.dash-hero{background:linear-gradient(135deg,#C8102E 0%,#921124 100%)!important;}

.stat{border-left-color:var(--primary-red)!important;}

.stat b{color:#9D1128!important;}

th{background:#FFF5F5!important;color:#8F0C21!important;}

tr:hover td{background:#FFF9F9!important;}



/* Area kartu pada halaman anggota: red-white, icon modern tebal 32–40px. */

.quick-access-grid{gap:14px!important;}

.quick-card.member-action-card{

  min-height:150px;

  background:linear-gradient(135deg,#FFFFFF 0%,#FFF5F5 100%)!important;

  border:1px solid var(--line-red)!important;

  border-left:4px solid var(--primary-red)!important;

  box-shadow:0 10px 24px rgba(200,16,46,.10)!important;

}

.quick-card.member-action-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(200,16,46,.16)!important;}

.quick-card.member-action-card .quick-icon{

  width:64px!important;height:64px!important;border-radius:18px!important;

  background:linear-gradient(135deg,#C8102E,#E30613)!important;color:#fff!important;

  box-shadow:0 8px 16px rgba(200,16,46,.20)!important;

}

.quick-card.member-action-card .quick-icon svg{width:38px!important;height:38px!important;stroke-width:2.8!important;}

.quick-card.member-action-card .quick-label{color:#8F0C21!important;font-size:13px!important;font-weight:800!important;}



/* Dua tombol foto terpisah: Profil tidak pernah mengubah Foto KTA. */

.member-photo-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 14px;}

.member-photo-action{

  display:inline-flex!important;align-items:center;gap:7px;padding:8px 11px!important;

  border-radius:10px!important;font-size:12px!important;background:linear-gradient(135deg,#C8102E,#A30D25)!important;

  box-shadow:0 5px 12px rgba(200,16,46,.16)!important;

}

.member-photo-action.member-photo-action-kta{background:#FFF5F5!important;color:#9D1128!important;border:1px solid var(--line-red)!important;}

.member-photo-action svg{flex:0 0 auto;}

.member-kta-number{background:#FFF5F5!important;color:#9D1128!important;border:1px solid var(--line-red)!important;}

.member-profile-status{display:block;text-align:center;}

.member-profile-status .inactive-reason-badge{margin:6px auto 0;color:#9D1128!important;}

.member-status-reason{display:block;font-size:10px;font-weight:800;color:#FFE4E6;margin-top:3px;}



/* Status tidak aktif dengan keterangan yang terbaca jelas. */

.inactive-reason-field{border-color:#F3C3CA!important;background:#FFF5F5!important;}

.inactive-reason-field span,.inactive-reason-field small{color:#9D1128!important;}

.inactive-reason-field select{border-color:#F3C3CA!important;}

.member-status-inactive{background:#FFE4E6!important;color:#9D1128!important;}

.member-status-active{background:#FFF5F5!important;color:#9D1128!important;border:1px solid var(--line-red)!important;}

.inactive-reason-badge{color:#9D1128!important;}



@media(max-width:620px){

  .quick-card.member-action-card{min-height:136px!important;padding:14px!important;}

  .quick-card.member-action-card .quick-icon{width:58px!important;height:58px!important;}

  .quick-card.member-action-card .quick-icon svg{width:34px!important;height:34px!important;}

  .member-photo-actions{width:100%;}

  .member-photo-action{flex:1 1 150px;justify-content:center;}

}





/* =========================================================

   Revisi 108 — Akses cepat dan profil lebih nyaman di mata

   Merah dipakai sebagai aksen/CTA, bukan warna dominan card.

   ========================================================= */

/* Akses Cepat: permukaan putih netral, ikon merah lembut, satu aksen garis. */

.app.member-app .quick-access-section h3 {

  color: #273244 !important;

}

.app.member-app .quick-card.member-action-card {

  min-height: 142px !important;

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  border-left: 3px solid #e7a2b0 !important;

  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055) !important;

}

.app.member-app .quick-card.member-action-card:hover {

  transform: translateY(-2px) !important;

  border-color: #d7dde5 !important;

  border-left-color: #c8102e !important;

  box-shadow: 0 11px 22px rgba(15, 23, 42, 0.09) !important;

}

.app.member-app .quick-card.member-action-card .quick-icon {

  width: 58px !important;

  height: 58px !important;

  border-radius: 17px !important;

  background: #fff1f2 !important;

  color: #b4233f !important;

  box-shadow: none !important;

}

.app.member-app .quick-card.member-action-card .quick-icon svg {

  width: 36px !important;

  height: 36px !important;

  stroke-width: 2.5 !important;

}

.app.member-app .quick-card.member-action-card .quick-label {

  color: #344054 !important;

  font-size: 13px !important;

  font-weight: 750 !important;

}



/* Profil: seluruh card, accordions, dan form kembali menjadi putih-netral. */

.app.member-app .member-profile-page .card,

.app.member-app .member-profile-page .profile-accordion-card {

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055) !important;

}

.app.member-app .member-profile-page .profile-header-card {

  background: linear-gradient(150deg, #ffffff 0%, #fcfcfd 100%) !important;

  border-top: 3px solid #e8b4be !important;

}

.app.member-app .member-profile-page .card h3,

.app.member-app .member-profile-page .profile-header-card h3 {

  color: #1f2937 !important;

}

.app.member-app .member-profile-page .profile-photo {

  border-color: #e5e7eb !important;

  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12) !important;

}

.app.member-app .member-profile-page .member-photo-action,

.app.member-app .member-profile-page .member-photo-action.member-photo-action-kta {

  background: #ffffff !important;

  color: #475467 !important;

  border: 1px solid #d8dee7 !important;

  box-shadow: none !important;

}

.app.member-app .member-profile-page .member-photo-action:hover,

.app.member-app .member-profile-page .member-photo-action.member-photo-action-kta:hover {

  background: #f8fafc !important;

  border-color: #c7d0db !important;

}

.app.member-app .member-profile-page .member-photo-action span {

  color: #475467 !important;

}

.app.member-app .member-profile-page .member-photo-action svg {

  color: #b4233f !important;

}

.app.member-app .member-profile-page .member-kta-number {

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;

  color: #475467 !important;

}



/* Accordions tidak lagi memakai latar/tombol merah penuh. */

.app.member-app .member-profile-page .profile-accordion-header {

  background: #ffffff !important;

  color: #253041 !important;

  border: 0 !important;

  box-shadow: none !important;

}

.app.member-app .member-profile-page .profile-accordion-header:hover,

.app.member-app .member-profile-page .profile-accordion-header.active {

  background: #f8fafc !important;

  color: #253041 !important;

}

.app.member-app .member-profile-page .profile-accordion-header.active {

  border-bottom: 1px solid #e5e7eb !important;

}

.app.member-app .member-profile-page .profile-accordion-header span,

.app.member-app .member-profile-page .profile-accordion-content span {

  color: #253041 !important;

}

.app.member-app .member-profile-page .profile-accordion-content {

  background: #ffffff !important;

}

.app.member-app .member-profile-page .profile-accordion-content [style*="color: var(--muted)"] {

  color: #667085 !important;

}

.app.member-app .member-profile-page .profile-accordion-content [style*="border-bottom"] {

  border-color: #eef0f3 !important;

}

.app.member-app .member-profile-page .member-edit-profile-button {

  background: #f8fafc !important;

  color: #475467 !important;

  border: 1px solid #d8dee7 !important;

  box-shadow: none !important;

}

.app.member-app .member-profile-page .member-edit-profile-button span {

  color: #475467 !important;

}

.app.member-app .member-profile-page .member-logout-button {

  background: #ffffff !important;

  color: #b4233f !important;

  border: 1px solid #f1c6ce !important;

  box-shadow: none !important;

}

.app.member-app .member-profile-page .member-logout-button svg {

  color: #b4233f !important;

}

.app.member-app .member-profile-page .member-logout-button:hover {

  background: #fff7f8 !important;

}



/* Form edit tetap netral; merah hanya untuk tombol Simpan sebagai CTA utama. */

.app.member-app .member-profile-edit-page .field input,

.app.member-app .member-profile-edit-page .field select,

.app.member-app .member-profile-edit-page .field textarea {

  border-color: #d8dee7 !important;

  background: #ffffff !important;

}

.app.member-app .member-profile-edit-page .field input:focus,

.app.member-app .member-profile-edit-page .field select:focus,

.app.member-app .member-profile-edit-page .field textarea:focus {

  border-color: #b4233f !important;

  outline: 2px solid rgba(180, 35, 63, 0.10) !important;

}

.app.member-app .member-profile-edit-page .history-editor-section .card,

.app.member-app .member-profile-edit-page .history-editor-section {

  border-color: #e5e7eb !important;

}

.app.member-app .member-profile-edit-page .member-save-profile-button {

  background: linear-gradient(135deg, #c8102e, #a30d25) !important;

  box-shadow: 0 5px 12px rgba(180, 35, 63, 0.18) !important;

}

@media (max-width: 620px) {

  .app.member-app .quick-card.member-action-card {

    min-height: 132px !important;

  }

  .app.member-app .quick-card.member-action-card .quick-icon {

    width: 54px !important;

    height: 54px !important;

  }

  .app.member-app .quick-card.member-action-card .quick-icon svg {

    width: 34px !important;

    height: 34px !important;

  }

}



/* =========================================================

   Revisi 109 — Akses keluar harus terlihat jelas di halaman anggota

   ========================================================= */

/* Aksi keluar ditempatkan pada Akses Cepat agar tidak tersembunyi di halaman profil. */

.app.member-app .quick-card.member-action-card.quick-logout-card {

  grid-column: 1 / -1;

  min-height: 74px !important;

  padding: 12px 16px !important;

  flex-direction: row !important;

  justify-content: flex-start !important;

  text-align: left !important;

  background: #fffafb !important;

  border: 1px solid #efd2d8 !important;

  border-left: 3px solid #c98291 !important;

  color: #344054 !important;

  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.045) !important;

}

.app.member-app .quick-card.member-action-card.quick-logout-card:hover {

  background: #fff5f6 !important;

  border-left-color: #b4233f !important;

  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;

}

.app.member-app .quick-card.member-action-card.quick-logout-card .quick-icon {

  flex: 0 0 auto;

  width: 42px !important;

  height: 42px !important;

  border-radius: 13px !important;

  background: #fff1f2 !important;

  color: #b4233f !important;

}

.app.member-app .quick-card.member-action-card.quick-logout-card .quick-icon svg {

  width: 25px !important;

  height: 25px !important;

  stroke-width: 2.7 !important;

}

.app.member-app .quick-card.member-action-card.quick-logout-card .quick-label,

.app.member-app .member-profile-page .member-logout-button .member-logout-label {

  display: inline-block !important;

  visibility: visible !important;

  opacity: 1 !important;

  color: #344054 !important;

  font-size: 14px !important;

  font-weight: 800 !important;

  line-height: 1.2 !important;

}

.app.member-app .member-profile-page .member-logout-button .member-logout-label {

  color: #b4233f !important;

}

@media (max-width: 620px) {

  .app.member-app .quick-card.member-action-card.quick-logout-card {

    min-height: 70px !important;

  }

}





/* =========================================================

   Revisi 110 — Superadmin/Nasional dan Admin PUK lebih netral

   Merah digunakan hanya pada aksi destruktif, indikator penting,

   dan elemen merek kecil. Halaman anggota tetap memakai revisi 108–109.

   ========================================================= */

/* Palet administratif: putih, abu-biru sangat muda, dan biru navy lembut. */

.app:not(.member-app){

  --blue:#1f5f9e;

  --ui-blue:#1f5f9e;

  --ui-deep:#153b68;

  --soft:#f6f8fb;

  --line:#dce5ef;

}

.app:not(.member-app) .content{

  background:#f7f9fc!important;

}



/* Sidebar tidak lagi merah penuh. */

.app:not(.member-app) .sidebar{

  background:linear-gradient(180deg,#17375f 0%,#102846 100%)!important;

}

.app:not(.member-app) .brand-panel{

  background:linear-gradient(135deg,#ffffff 0%,#f2f7fc 100%)!important;

  border-bottom-color:#b9d5ef!important;

  color:#143a68!important;

}

.app:not(.member-app) .brand-panel h1,

.app:not(.member-app) .brand-panel h2,

.app:not(.member-app) .brand-panel h3,

.app:not(.member-app) .brand-panel p,

.app:not(.member-app) .brand-panel b,

.app:not(.member-app) .brand-panel span,

.app:not(.member-app) .brand-panel .sidebar-identity-label{

  color:#143a68!important;

  text-shadow:none!important;

}

.app:not(.member-app) .role-badge{

  background:rgba(255,255,255,.10)!important;

  border-color:rgba(255,255,255,.18)!important;

}

.app:not(.member-app) .sidebar nav button{

  border-color:rgba(255,255,255,.12)!important;

  color:#e7f0fb!important;

}

.app:not(.member-app) .sidebar nav button:hover{

  background:rgba(255,255,255,.10)!important;

  color:#ffffff!important;

}

.app:not(.member-app) .sidebar nav button.active{

  background:rgba(122,184,232,.18)!important;

  border-color:rgba(158,210,247,.32)!important;

  box-shadow:inset 3px 0 0 #8bc5ee!important;

}

.app:not(.member-app) .sidebar nav button.active .nav-ic{

  color:#a9dbfb!important;

}

.app:not(.member-app) .sidebar nav .menu-group-head{

  color:#a9bfda!important;

}

.app:not(.member-app) .sidebar nav .menu-group-head:hover{

  color:#e7f0fb!important;

}

.app:not(.member-app) .logout{

  background:rgba(255,255,255,.10)!important;

  color:#ffffff!important;

  border:1px solid rgba(255,255,255,.16)!important;

  box-shadow:none!important;

}



/* Permukaan konten administratif dibuat netral. */

.app:not(.member-app) .topbar h2,

.app:not(.member-app) .card h3,

.app:not(.member-app) .info-section h3{

  color:#21354f!important;

}

.app:not(.member-app) .card{

  background:#ffffff!important;

  border:1px solid #dfe7ef!important;

  box-shadow:0 7px 18px rgba(15,23,42,.055)!important;

}

.app:not(.member-app) .card:hover{

  box-shadow:0 10px 24px rgba(15,23,42,.075)!important;

}

.app:not(.member-app) .dash-hero{

  background:linear-gradient(135deg,#1b416f 0%,#2d5e92 100%)!important;

  box-shadow:0 10px 24px rgba(25,66,109,.16)!important;

}

.app:not(.member-app) .dash-hero p{

  color:#e9f2fb!important;

}

.app:not(.member-app) .pill{background:rgba(255,255,255,.16);color:#ffffff;border:1px solid rgba(255,255,255,.22);}

.app:not(.member-app) .stat{

  border-color:#dfe7ef!important;

  border-left-color:#78aeda!important;

  box-shadow:0 6px 16px rgba(15,23,42,.045)!important;

}

.app:not(.member-app) .stat b{

  color:#214c7a!important;

}

.app:not(.member-app) .pending-stat{

  border-left-color:#e6b85c!important;

}

.app:not(.member-app) .approved-stat{

  border-left-color:#63ad86!important;

}

.app:not(.member-app) th{

  background:#f3f7fb!important;

  color:#3d5875!important;

}

.app:not(.member-app) tr:hover td{

  background:#f8fbfe!important;

}

.app:not(.member-app) .bar-track span{

  background:linear-gradient(90deg,#4b8ac5,#79b6df)!important;

}



/* Tombol: biru lembut untuk aksi biasa; merah hanya aksi bahaya. */

.app:not(.member-app) button:not(.danger):not(.admin-enable){

  background:linear-gradient(135deg,#2e6fae,#1f568d)!important;

  color:#ffffff!important;

  box-shadow:0 5px 12px rgba(31,86,141,.14)!important;

}

.app:not(.member-app) button:not(.danger):not(.admin-enable):hover{

  filter:brightness(1.04)!important;

}

.app:not(.member-app) button.btn-secondary,

.app:not(.member-app) .btn-secondary{

  background:#f5f8fc!important;

  color:#34506f!important;

  border:1px solid #d7e1ec!important;

  box-shadow:none!important;

}

.app:not(.member-app) button.danger,

.app:not(.member-app) .danger{

  background:#c93b4c!important;

  color:#ffffff!important;

  box-shadow:0 5px 12px rgba(201,59,76,.14)!important;

}

.app:not(.member-app) .approval-switch button{

  background:#edf5fc!important;

  color:#355878!important;

  border:1px solid #d8e6f3!important;

  box-shadow:none!important;

}

.app:not(.member-app) .approval-switch button.active{

  background:#2e6fae!important;

  color:#ffffff!important;

  border-color:#2e6fae!important;

}

.app:not(.member-app) .notification-button{

  background:#ffffff!important;

  color:#214c7a!important;

  border-color:#d7e4f3!important;

  box-shadow:0 4px 14px rgba(15,23,42,.06)!important;

}

.app:not(.member-app) .notification-button:hover{

  background:#f2f7fc!important;

}



/* Form dan elemen pendukung tetap tenang secara visual. */

.app:not(.member-app) .field input:focus,

.app:not(.member-app) .field select:focus,

.app:not(.member-app) .field textarea:focus{

  outline:2px solid rgba(48,111,174,.12)!important;

  border-color:#5e99cf!important;

}

.app:not(.member-app) .field input,

.app:not(.member-app) .field select,

.app:not(.member-app) .field textarea{

  border-color:#d7e1ec!important;

}

.app:not(.member-app) .notification-card{

  border-top-color:#e0b85c!important;

}

.app:not(.member-app) .notify-row{

  border-color:#e1e8f0!important;

  background:#fcfdff!important;

}

.app:not(.member-app) .notify-row.unread{

  border-left-color:#e0b85c!important;

  background:#fffdf7!important;

}

.app:not(.member-app) .notify-row div b{

  color:#214c7a!important;

}



/* Pengecualian yang tetap merah: hapus/nonaktifkan dan badge peringatan. */

.app:not(.member-app) .approval-status.approval-rejected,

.app:not(.member-app) .admin-inactive{

  background:#fce8eb!important;

  color:#a82235!important;

}





/* =========================================================

   Revisi 111 — Header, identitas sidebar, dan mode tampilan admin

   - Identitas dua logo tidak memakai latar putih.

   - Mode tampilan hanya mengubah aksen administratif secara halus.

   - Tidak ada override global pada body, card, atau seluruh tombol aplikasi.

   ========================================================= */



/* Variabel dasar untuk Admin PUK dan Superadmin/Nasional. */

.app:not(.member-app){

  --admin-sidebar-top:#173a63;

  --admin-sidebar-bottom:#102846;

  --admin-brand-top:#224a77;

  --admin-brand-bottom:#183a61;

  --admin-brand-text:#ffffff;

  --admin-brand-subtext:#d7e5f4;

  --admin-accent:#2e6fae;

  --admin-accent-deep:#1f568d;

  --admin-accent-soft:#edf5fc;

  --admin-accent-line:#d7e4f3;

  --admin-active-line:#8bc5ee;

  --admin-active-bg:rgba(46,111,174,.18);

  --admin-active-border:rgba(139,197,238,.36);

  --admin-accent-mid:#83b4dc;

  --admin-hero-start:#1b416f;

  --admin-hero-end:#2d5e92;

  --admin-focus:rgba(48,111,174,.15);

}



/* Mode tetap tenang: hanya aksen antarmuka administrasi yang berganti. */

.app.admin-mode-emerald{

  --admin-accent:#26835f;

  --admin-accent-deep:#1b664a;

  --admin-accent-soft:#eef8f3;

  --admin-accent-line:#cee8da;

  --admin-active-line:#83caa7;

  --admin-active-bg:rgba(38,131,95,.17);

  --admin-active-border:rgba(131,202,167,.36);

  --admin-accent-mid:#7dc19f;

  --admin-hero-start:#214f4a;

  --admin-hero-end:#347765;

  --admin-focus:rgba(38,131,95,.15);

  --admin-sidebar-top:#123f2f;

  --admin-sidebar-bottom:#0b261c;

  --admin-brand-top:#1a4c3a;

  --admin-brand-bottom:#12372a;

}

.app.admin-mode-dark{

  --admin-accent:#526f92;

  --admin-accent-deep:#354d6a;

  --admin-accent-soft:#f0f4f8;

  --admin-accent-line:#d5dee8;

  --admin-active-line:#aebfd0;

  --admin-active-bg:rgba(82,111,146,.16);

  --admin-active-border:rgba(174,191,208,.36);

  --admin-accent-mid:#96aac0;

  --admin-hero-start:#253d58;

  --admin-hero-end:#47627e;

  --admin-focus:rgba(82,111,146,.15);

  --admin-sidebar-top:#1a2330;

  --admin-sidebar-bottom:#10161e;

  --admin-brand-top:#222d3d;

  --admin-brand-bottom:#18222d;

}



/* Penyelarasan latar belakang sidebar berdasarkan mode aktif di layar PC */

.app.member-app.admin-mode-classic .sidebar {

  background: linear-gradient(180deg, #173a63 0%, #102846 100%) !important;

}

.app:not(.member-app).admin-mode-classic .sidebar {

  background: linear-gradient(180deg, var(--admin-sidebar-top), var(--admin-sidebar-bottom)) !important;

}

.app.admin-mode-emerald .sidebar {

  background: linear-gradient(180deg, var(--admin-sidebar-top), var(--admin-sidebar-bottom)) !important;

}

.app.admin-mode-dark .sidebar {

  background: linear-gradient(180deg, var(--admin-sidebar-top), var(--admin-sidebar-bottom)) !important;

}



/* Panel identitas dibuat gelap agar dua logo dan tulisan mudah terlihat. */

.app:not(.member-app) .brand-panel{

  background:linear-gradient(145deg,var(--admin-brand-top),var(--admin-brand-bottom))!important;

  border-bottom:1px solid rgba(208,229,248,.28)!important;

  color:var(--admin-brand-text)!important;

  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)!important;

}

.app:not(.member-app) .brand-panel strong,

.app:not(.member-app) .brand-panel small,

.app:not(.member-app) .brand-panel h1,

.app:not(.member-app) .brand-panel h2,

.app:not(.member-app) .brand-panel h3,

.app:not(.member-app) .brand-panel p,

.app:not(.member-app) .brand-panel b,

.app:not(.member-app) .brand-panel span,

.app:not(.member-app) .brand-panel .sidebar-identity-label{

  color:var(--admin-brand-text)!important;

  text-shadow:0 1px 2px rgba(3,18,39,.28)!important;

}

.app:not(.member-app) .brand-panel small{

  color:var(--admin-brand-subtext)!important;

}

.app:not(.member-app) .brand-panel .brand-logos{

  padding:7px 10px!important;

  border-radius:14px!important;

  background:rgba(6,26,52,.24)!important;

  border:1px solid rgba(255,255,255,.12)!important;

}

.app:not(.member-app) .brand-panel .brand-logos img{

  background:transparent!important;

  filter:drop-shadow(0 2px 4px rgba(0,0,0,.22))!important;

}



/* Header Dashboard: judul dan lonceng berada satu baris. */

.app:not(.member-app) .topbar{

  display:grid!important;

  grid-template-columns:minmax(0,1fr) auto!important;

  align-items:center!important;

  gap:14px!important;

}

.topbar-heading{

  display:flex;

  align-items:center;

  gap:12px;

  min-width:0;

}

.topbar-title-stack{

  min-width:0;

}

.topbar-title-stack h2{

  margin:0!important;

}

.dashboard-greeting{

  margin:4px 0 0!important;

  color:#667f9b!important;

  font-size:12px!important;

  font-weight:700!important;

  line-height:1.3!important;

}

.app:not(.member-app) .topbar-actions{

  width:auto!important;

  margin:0!important;

  margin-left:auto!important;

  flex-wrap:nowrap!important;

  justify-content:flex-end!important;

}

.app:not(.member-app) .notification-shell{

  display:flex;

  align-items:center;

}

.app:not(.member-app) .notification-button{

  align-self:center!important;

}



/* Gunakan token mode, bukan nilai warna global yang memengaruhi semua halaman. */

.app:not(.member-app) .sidebar,

.app.admin-mode-emerald .sidebar,

.app.admin-mode-dark .sidebar{

  background:linear-gradient(180deg,var(--admin-sidebar-top),var(--admin-sidebar-bottom))!important;

}

.app:not(.member-app) .sidebar nav button.active,

.app.admin-mode-emerald .sidebar nav button.active,

.app.admin-mode-dark .sidebar nav button.active{

  background:var(--admin-active-bg)!important;

  border-color:var(--admin-active-border)!important;

  box-shadow:inset 3px 0 0 var(--admin-active-line)!important;

}

.app:not(.member-app) .sidebar nav button.active .nav-ic,

.app.admin-mode-emerald .sidebar nav button.active .nav-ic,

.app.admin-mode-dark .sidebar nav button.active .nav-ic{

  color:var(--admin-active-line)!important;

}

.app:not(.member-app) .dash-hero,

.app.admin-mode-emerald .dash-hero,

.app.admin-mode-dark .dash-hero{

  background:linear-gradient(135deg,var(--admin-hero-start),var(--admin-hero-end))!important;

}

.app:not(.member-app) button:not(.danger):not(.admin-enable),

.app.admin-mode-emerald button:not(.danger):not(.admin-enable),

.app.admin-mode-dark button:not(.danger):not(.admin-enable){

  background:linear-gradient(135deg,var(--admin-accent),var(--admin-accent-deep))!important;

}

.app:not(.member-app) .approval-switch button.active,

.app.admin-mode-emerald .approval-switch button.active,

.app.admin-mode-dark .approval-switch button.active{

  background:var(--admin-accent)!important;

  border-color:var(--admin-accent)!important;

}

.app:not(.member-app) .notification-button,

.app.admin-mode-emerald .notification-button,

.app.admin-mode-dark .notification-button{

  color:var(--admin-accent-deep)!important;

  border-color:var(--admin-accent-line)!important;

}

.app:not(.member-app) .notification-button:hover,

.app.admin-mode-emerald .notification-button:hover,

.app.admin-mode-dark .notification-button:hover{

  background:var(--admin-accent-soft)!important;

}

.app:not(.member-app) .field input:focus,

.app.admin-mode-emerald .field input:focus,

.app.admin-mode-dark .field input:focus,

.app:not(.member-app) .field select:focus,

.app.admin-mode-emerald .field select:focus,

.app.admin-mode-dark .field select:focus,

.app:not(.member-app) .field textarea:focus,

.app.admin-mode-emerald .field textarea:focus,

.app.admin-mode-dark .field textarea:focus{

  outline:2px solid var(--admin-focus)!important;

  border-color:var(--admin-accent)!important;

}

.app:not(.member-app) .bar-track span,

.app.admin-mode-emerald .bar-track span,

.app.admin-mode-dark .bar-track span{

  background:linear-gradient(90deg,var(--admin-accent),var(--admin-accent-mid))!important;

}



/* Panel identitas dibuat gelap agar dua logo dan tulisan mudah terlihat. */

.app:not(.member-app) .brand-panel,

.app.admin-mode-emerald .brand-panel,

.app.admin-mode-dark .brand-panel{

  background:linear-gradient(145deg,var(--admin-brand-top),var(--admin-brand-bottom))!important;

  border-bottom:1px solid rgba(208,229,248,.28)!important;

  color:var(--admin-brand-text)!important;

  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)!important;

}

.app:not(.member-app) .brand-panel strong,

.app.admin-mode-emerald .brand-panel strong,

.app.admin-mode-dark .brand-panel strong,

.app:not(.member-app) .brand-panel small,

.app.admin-mode-emerald .brand-panel small,

.app.admin-mode-dark .brand-panel small,

.app:not(.member-app) .brand-panel h1,

.app.admin-mode-emerald .brand-panel h1,

.app.admin-mode-dark .brand-panel h1,

.app:not(.member-app) .brand-panel h2,

.app.admin-mode-emerald .brand-panel h2,

.app.admin-mode-dark .brand-panel h2,

.app:not(.member-app) .brand-panel h3,

.app.admin-mode-emerald .brand-panel h3,

.app.admin-mode-dark .brand-panel h3,

.app:not(.member-app) .brand-panel p,

.app.admin-mode-emerald .brand-panel p,

.app.admin-mode-dark .brand-panel p,

.app:not(.member-app) .brand-panel b,

.app.admin-mode-emerald .brand-panel b,

.app.admin-mode-dark .brand-panel b,

.app:not(.member-app) .brand-panel span,

.app.admin-mode-emerald .brand-panel span,

.app.admin-mode-dark .brand-panel span,

.app:not(.member-app) .brand-panel .sidebar-identity-label,

.app.admin-mode-emerald .brand-panel .sidebar-identity-label,

.app.admin-mode-dark .brand-panel .sidebar-identity-label{

  color:var(--admin-brand-text)!important;

}



/* Mobile: lonceng tetap sejajar dengan judul, selector lain tetap berada di sidebar. */

@media (max-width:900px){

  .app:not(.member-app) .topbar{

    grid-template-columns:minmax(0,1fr) auto!important;

    align-items:center!important;

  }

  .app:not(.member-app) .topbar-actions{

    width:auto!important;

    flex:0 0 auto!important;

  }

  .app:not(.member-app) .dashboard-greeting{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

  }

}





/* =========================================================

   Revisi 112 — Header identitas Admin/Superadmin dan penghapusan menu Tata Letak

   - Panel dua logo selalu gelap, termasuk pada desktop dan mobile.

   - Selector Tata Letak dihapus dari HTML dan disembunyikan sebagai pengaman cache.

   ========================================================= */



/* Pengaman akhir: selector ber-ID ini mengalahkan override putih dari revisi lama. */

#app .sidebar .brand-panel,

#app:not(.member-app) .sidebar .brand-panel{

  background-color:#122f52!important;

  background-image:linear-gradient(145deg,#1d4b7c 0%,#102846 100%)!important;

  border:1px solid rgba(190,219,246,.26)!important;

  border-bottom:1px solid rgba(190,219,246,.30)!important;

  color:#ffffff!important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(4,20,42,.16)!important;

  backdrop-filter:none!important;

  -webkit-backdrop-filter:none!important;

}

#app .sidebar .brand-panel .brand-logos{

  background:rgba(4,24,49,.42)!important;

  border:1px solid rgba(224,239,252,.18)!important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;

}

#app .sidebar .brand-panel strong,

#app .sidebar .brand-panel small,

#app .sidebar .brand-panel h1,

#app .sidebar .brand-panel h2,

#app .sidebar .brand-panel h3,

#app .sidebar .brand-panel p,

#app .sidebar .brand-panel b,

#app .sidebar .brand-panel span{

  color:#ffffff!important;

  text-shadow:0 1px 2px rgba(2,15,34,.38)!important;

}

#app .sidebar .brand-panel small{color:#d9e9f8!important;}

#app .sidebar .brand-panel .brand-logos img{

  background:transparent!important;

  filter:drop-shadow(0 2px 4px rgba(0,0,0,.30))!important;

}



/* Menu Tata Letak sudah dihentikan; aturan ini juga menangani HTML/cache lama. */

.layout-selector-el{display:none!important;}





/* Revisi 113 — Dashboard Admin/Superadmin dibuat ringkas seperti dashboard anggota */

.admin-dashboard-hero{

  padding:20px 22px;

}

.admin-dashboard-hero h2{

  margin:0 0 6px;

}

.admin-dashboard-hero p{

  margin:0;

  max-width:760px;

}

.admin-dashboard-role{

  margin-top:10px!important;

  font-size:13px;

  color:#e2e8f0!important;

}

.admin-dashboard-section{

  margin-bottom:28px;

}

.admin-dashboard-grid{

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:14px;

}

.admin-action-card,

.admin-summary-card{

  position:relative;

  min-height:144px;

  align-items:flex-start;

  justify-content:flex-start;

  gap:10px;

  padding:18px 16px;

}

.admin-action-card{

  cursor:pointer;

}

.admin-action-card:hover{

  transform:translateY(-3px);

  box-shadow:0 18px 34px rgba(15,23,42,.08);

}

.admin-action-card:focus-visible{

  outline:3px solid rgba(59,130,246,.22);

  outline-offset:2px;

}

.admin-action-card .quick-icon,

.admin-summary-card .quick-icon{

  width:56px;

  height:56px;

  border-radius:16px;

}

.admin-action-card .quick-icon svg,

.admin-summary-card .quick-icon svg{

  width:36px;

  height:36px;

  stroke-width:2.3;

}

.admin-action-card .quick-label,

.admin-summary-card .quick-label{

  width:100%;

  text-align:left;

  font-size:14px;

  font-weight:800;

  color:#0f172a;

}

.admin-quick-desc{

  width:100%;

  text-align:left;

  font-size:12px;

  line-height:1.5;

  color:#64748b;

}

.admin-quick-value{

  margin-top:auto;

  font-size:28px;

  line-height:1;

  font-weight:900;

  color:#0b3f7a;

}

.admin-quick-badge{

  position:absolute;

  top:12px;

  right:12px;

  min-width:26px;

  height:26px;

  padding:0 8px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:999px;

  background:#dc2626;

  color:#fff;

  font-size:11px;

  font-weight:800;

  box-shadow:0 8px 18px rgba(220,38,38,.18);

}

@media (max-width:640px){

  .admin-dashboard-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;

  }

  .admin-action-card,

  .admin-summary-card{

    min-height:132px;

    padding:16px 14px;

  }

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon{

    width:50px;

    height:50px;

  }

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg{

    width:32px;

    height:32px;

  }

  .admin-quick-value{

    font-size:24px;

  }

}





/* Revisi 114 — Kartu dashboard dibuat lebih padat dan ikon dipusatkan */

.admin-dashboard-section{

  margin-bottom:20px;

}

.admin-dashboard-grid{

  gap:10px;

}

.admin-action-card,

.admin-summary-card{

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:7px;

  padding:12px 10px;

}

.admin-summary-card{

  min-height:108px;

}

.admin-action-card{

  min-height:116px;

}

.admin-action-card .quick-icon,

.admin-summary-card .quick-icon{

  width:46px;

  height:46px;

  border-radius:14px;

  margin:0 auto;

}

.admin-action-card .quick-icon svg,

.admin-summary-card .quick-icon svg{

  width:29px;

  height:29px;

  stroke-width:2.35;

}

.admin-action-card .quick-label,

.admin-summary-card .quick-label{

  width:100%;

  text-align:center;

  font-size:12px;

  line-height:1.25;

}

.admin-quick-desc{

  display:none;

}

.admin-quick-value{

  margin-top:0;

  width:100%;

  text-align:center;

  font-size:23px;

}

.admin-quick-badge{

  top:8px;

  right:8px;

  min-width:22px;

  height:22px;

  padding:0 6px;

  font-size:10px;

}

@media (max-width:640px){

  .admin-dashboard-section{margin-bottom:18px;}

  .admin-dashboard-grid{gap:9px;}

  .admin-summary-card{min-height:100px;}

  .admin-action-card{min-height:110px;}

  .admin-action-card,

  .admin-summary-card{padding:11px 8px;}

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon{

    width:42px;

    height:42px;

  }

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg{

    width:27px;

    height:27px;

  }

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label{font-size:11px;}

  .admin-quick-value{font-size:21px;}

}





/* Revisi 116 — Menu Profil Anggota grid 2 kolom, ringkas dan bertahap */

.member-profile-menu-page{padding-bottom:18px;}

.member-profile-overview{

  display:flex;

  align-items:center;

  gap:14px;

  padding:14px;

  margin-bottom:18px;

}

.member-profile-overview-photo{

  width:64px;

  height:72px;

  object-fit:cover;

  border-radius:14px;

  border:2px solid #e2e8f0;

  flex:0 0 auto;

}

.member-profile-overview-copy{min-width:0;}

.member-profile-overview-copy h3{

  margin:0 0 3px!important;

  font-size:16px!important;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}

.member-profile-overview-copy p{

  margin:0;

  color:#64748b;

  font-size:12px;

  font-weight:700;

}

.member-profile-overview-status{

  display:inline-flex;

  margin-top:7px;

  padding:3px 8px;

  border-radius:999px;

  font-size:11px;

  font-weight:800;

}

.member-profile-overview-status.active{background:#ecfdf5;color:#047857;}

.member-profile-overview-status.inactive{background:#fef2f2;color:#b91c1c;}

.member-profile-menu-heading{margin:0 0 12px;}

.member-profile-menu-heading h3{margin:0 0 3px;font-size:16px;color:#0f2444;}

.member-profile-menu-heading p{margin:0;color:#64748b;font-size:12px;}

.member-profile-menu-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:10px;

}

.member-profile-menu-card{

  position:relative;

  min-height:112px;

  padding:12px 10px 10px;

  border:1px solid #e8edf5;

  border-radius:15px;

  background:#fff;

  color:#0f172a;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:5px;

  box-shadow:0 4px 12px rgba(15,23,42,.03);

  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;

}

.member-profile-menu-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.08);}

.member-profile-menu-card:active{transform:scale(.98);}

.member-profile-menu-card:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px;}

.member-profile-menu-icon{

  width:42px;

  height:42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:13px;

}

.member-profile-menu-title{font-size:12px;font-weight:850;line-height:1.2;}

.member-profile-menu-note{font-size:10px;line-height:1.3;color:#64748b;}

.member-profile-menu-arrow{position:absolute;right:9px;top:8px;font-size:18px;line-height:1;color:#94a3b8;}

.member-profile-tone-blue .member-profile-menu-icon{background:#eff6ff;color:#2563eb;}

.member-profile-tone-green .member-profile-menu-icon{background:#ecfdf5;color:#059669;}

.member-profile-tone-orange .member-profile-menu-icon{background:#fff7ed;color:#ea580c;}

.member-profile-tone-purple .member-profile-menu-icon{background:#faf5ff;color:#7e22ce;}

.member-profile-logout-link{

  width:100%;

  margin-top:16px;

  padding:10px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  border:1px solid #fecaca;

  border-radius:12px;

  background:#fff;

  color:#b91c1c;

  font-size:12px;

  font-weight:800;

  box-shadow:none;

}

.member-profile-logout-link:hover{background:#fef2f2;}

.member-profile-detail-page{padding-bottom:20px;}

.member-profile-back{

  padding:0;

  margin:0 0 14px;

  border:0;

  background:transparent;

  color:#2563eb;

  box-shadow:none;

  display:inline-flex;

  align-items:center;

  gap:6px;

  font-size:12px;

  font-weight:800;

}

.member-profile-back:hover{filter:none;color:#1d4ed8;}

.member-profile-detail-heading{margin-bottom:12px;}

.member-profile-detail-heading h3{margin:0 0 4px;color:#0f2444;font-size:17px;}

.member-profile-detail-heading p{margin:0;color:#64748b;font-size:12px;line-height:1.45;}

.member-profile-detail-card{padding:14px;margin-bottom:0;}

.member-profile-info-list{display:grid;gap:0;}

.member-profile-info-row{

  display:grid;

  grid-template-columns:minmax(112px,.9fr) minmax(0,1.25fr);

  gap:12px;

  padding:11px 0;

  border-bottom:1px dashed #e2e8f0;

  align-items:start;

}

.member-profile-info-row:first-child{padding-top:0;}

.member-profile-info-row:last-child{padding-bottom:0;border-bottom:0;}

.member-profile-info-row>span{color:#64748b;font-size:12px;line-height:1.4;}

.member-profile-info-row>strong{color:#172033;font-size:12px;line-height:1.45;text-align:right;overflow-wrap:anywhere;}

.member-profile-file-link,.member-profile-edit-inline{

  margin-top:14px;

  padding:9px 11px;

  border:1px solid #dbeafe;

  border-radius:10px;

  background:#eff6ff;

  color:#1d4ed8;

  display:inline-flex;

  align-items:center;

  gap:6px;

  font-size:12px;

  font-weight:800;

  box-shadow:none;

}

.member-profile-edit-inline{width:100%;justify-content:center;}

.member-profile-empty{color:#94a3b8;font-size:12px;font-weight:600;}

.member-profile-history-wrap{margin-top:0;}

.member-profile-history-wrap>div{margin-top:0!important;}

@media(max-width:420px){

  .member-profile-menu-card{min-height:104px;padding:10px 8px;}

  .member-profile-menu-icon{width:38px;height:38px;border-radius:12px;}

  .member-profile-menu-icon svg{width:28px!important;height:28px!important;}

  .member-profile-menu-note{font-size:9.5px;}

  .member-profile-info-row{grid-template-columns:1fr;gap:3px;}

  .member-profile-info-row>strong{text-align:left;}

}





/* =========================================================

   Revisi 117 — Profil Anggota Netral dan Nyaman di Mata

   Kartu menu profil dibuat putih/netral; merah hanya untuk aksi keluar.

   ========================================================= */

.app.member-app .member-profile-page,

.app.member-app .member-profile-detail-page{

  color:#172033;

}

.app.member-app .member-profile-overview.card,

.app.member-app .member-profile-detail-card.card{

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  box-shadow:0 6px 18px rgba(15,23,42,.045)!important;

}

.app.member-app .member-profile-overview-copy h3,

.app.member-app .member-profile-menu-heading h3,

.app.member-app .member-profile-detail-heading h3{

  color:#172033!important;

}

.app.member-app .member-profile-menu-heading p,

.app.member-app .member-profile-detail-heading p{

  color:#64748b!important;

}

/* Kartu menu dibuat sebagai tombol, sehingga harus menimpa tombol global berwarna merah. */

.app.member-app button.member-profile-menu-card{

  min-height:112px;

  background:#ffffff!important;

  color:#172033!important;

  border:1px solid #e2e8f0!important;

  box-shadow:0 4px 12px rgba(15,23,42,.035)!important;

}

.app.member-app button.member-profile-menu-card:hover{

  background:#f8fafc!important;

  border-color:#cbd5e1!important;

  box-shadow:0 10px 20px rgba(15,23,42,.075)!important;

  filter:none!important;

}

.app.member-app .member-profile-menu-card .member-profile-menu-title{

  color:#172033!important;

}

.app.member-app .member-profile-menu-card .member-profile-menu-note{

  color:#64748b!important;

}

.app.member-app .member-profile-menu-card .member-profile-menu-arrow{

  color:#94a3b8!important;

}

/* Warna hanya dipakai sebagai aksen lembut pada ikon, bukan blok kartu. */

.app.member-app .member-profile-tone-blue .member-profile-menu-icon{background:#eff6ff!important;color:#2563eb!important;}

.app.member-app .member-profile-tone-green .member-profile-menu-icon{background:#ecfdf5!important;color:#059669!important;}

.app.member-app .member-profile-tone-orange .member-profile-menu-icon{background:#fff7ed!important;color:#ea580c!important;}

.app.member-app .member-profile-tone-purple .member-profile-menu-icon{background:#faf5ff!important;color:#7e22ce!important;}

.app.member-app button.member-profile-back{

  background:transparent!important;

  color:#2563eb!important;

  border:0!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app button.member-profile-back:hover{

  background:#eff6ff!important;

  color:#1d4ed8!important;

}

.app.member-app button.member-profile-file-link,

.app.member-app button.member-profile-edit-inline{

  background:#eff6ff!important;

  color:#1d4ed8!important;

  border:1px solid #dbeafe!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app button.member-profile-file-link:hover,

.app.member-app button.member-profile-edit-inline:hover{

  background:#dbeafe!important;

  border-color:#bfdbfe!important;

}

.app.member-app button.member-profile-logout-link{

  background:#ffffff!important;

  color:#b4233f!important;

  border:1px solid #fecdd3!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app button.member-profile-logout-link:hover{

  background:#fff1f2!important;

  border-color:#fda4af!important;

}

/* Aksi simpan dibuat navy lembut agar konsisten dengan permukaan profil yang netral. */

.app.member-app .member-profile-edit-page button.member-save-profile-button{

  background:linear-gradient(135deg,#1d4ed8,#1e40af)!important;

  color:#ffffff!important;

  border:0!important;

}

.app.member-app .member-profile-edit-page .member-photo-action{

  background:#eff6ff!important;

  color:#1d4ed8!important;

  border:1px solid #dbeafe!important;

  box-shadow:none!important;

}

.app.member-app .member-profile-edit-page .member-photo-action.member-photo-action-kta{

  background:#f8fafc!important;

  color:#475569!important;

  border:1px solid #e2e8f0!important;

}

@media(max-width:420px){

  .app.member-app button.member-profile-menu-card{min-height:104px;}

}





/* =========================================================

   Revisi 118 — Riwayat Anggota Netral

   Riwayat berada pada member-profile-detail-page sehingga

   perlu override tersendiri agar tidak mengikuti tombol merah global.

   ========================================================= */

.app.member-app .member-profile-detail-page .member-profile-history-wrap{

  margin-top:0;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .profile-accordion-card{

  padding:0!important;

  overflow:hidden!important;

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  border-radius:14px!important;

  box-shadow:0 5px 14px rgba(15,23,42,.04)!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap button.profile-accordion-header{

  width:100%!important;

  display:flex!important;

  align-items:center!important;

  justify-content:space-between!important;

  padding:14px 15px!important;

  background:#ffffff!important;

  color:#172033!important;

  border:0!important;

  border-left:3px solid #cbd5e1!important;

  border-radius:0!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap button.profile-accordion-header:hover,

.app.member-app .member-profile-detail-page .member-profile-history-wrap button.profile-accordion-header.active{

  background:#f8fafc!important;

  color:#172033!important;

  border-left-color:#60a5fa!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap button.profile-accordion-header.active{

  border-bottom:1px solid #e2e8f0!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .profile-accordion-header span{

  color:#172033!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .accordion-arrow{

  color:#64748b!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .profile-accordion-content{

  padding:14px!important;

  background:#ffffff!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .table-responsive{

  border-color:#e2e8f0!important;

  background:#ffffff!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap table{

  background:#ffffff!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap th,

.app.member-app .member-profile-detail-page .member-profile-history-wrap thead tr{

  background:#f8fafc!important;

  color:#334155!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap th{

  border-bottom-color:#e2e8f0!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap td{

  color:#334155!important;

  border-bottom-color:#eef2f7!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap tr:hover td{

  background:#fafcff!important;

}

/* Status sertifikat dibuat hijau lembut atau abu netral, bukan blok merah. */

.app.member-app .member-profile-detail-page .member-profile-history-wrap .approval-status.approval-approved{

  background:#ecfdf5!important;

  color:#047857!important;

  border:1px solid #a7f3d0!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .approval-status.approval-rejected{

  background:#f8fafc!important;

  color:#475569!important;

  border:1px solid #dbe3ec!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap a{

  color:#2563eb!important;

}





/* =========================================================

   Revisi 119 — Akses Cepat Anggota tanpa duplikasi fungsi

   Beranda mempertahankan grid 2x2: Kartu, Profil, Status, Bantuan.

   Ubah Profil dan Ubah Sandi hanya tersedia di menu Profil.

   ========================================================= */

/* Old duplicate member action card styles removed to allow modern grid and aesthetic card layouts to render correctly */

.app.member-app .member-home-quick-access .member-quick-card-kta .quick-icon{background:#eff6ff!important;color:#2563eb!important;}

.app.member-app .member-home-quick-access .member-quick-card-profile .quick-icon{background:#ecfdf5!important;color:#059669!important;}

.app.member-app .member-home-quick-access .member-quick-card-status .quick-icon{background:#fff7ed!important;color:#ea580c!important;}

.app.member-app .member-home-quick-access .member-quick-card-help .quick-icon{background:#faf5ff!important;color:#7e22ce!important;}

.app.member-app .member-quick-logout-link{

  width:100%!important;

  margin-top:12px!important;

  min-height:42px!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  gap:7px!important;

  padding:10px 12px!important;

  background:#ffffff!important;

  color:#b4233f!important;

  border:1px solid #f1c6ce!important;

  border-radius:12px!important;

  box-shadow:none!important;

  font-size:12px!important;

  font-weight:800!important;

}

.app.member-app .member-quick-logout-link:hover{

  background:#fff7f8!important;

  border-color:#e9aebb!important;

  filter:none!important;

}

.app.member-app .member-quick-logout-link svg{color:#b4233f!important;}



/* Status Pengajuan anggota: netral dan selaras dengan kartu akses cepat. */

.app.member-app .member-activity-page{

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  box-shadow:0 7px 18px rgba(15,23,42,.05)!important;

}

.app.member-app .member-activity-page h3{color:#172033!important;}

.app.member-app .member-activity-page .approval-switch{flex-wrap:wrap!important;}

.app.member-app .member-activity-page button.member-activity-tab{

  background:#f8fafc!important;

  color:#475569!important;

  border:1px solid #dbe3ec!important;

  box-shadow:none!important;

  padding:8px 10px!important;

  font-size:12px!important;

}

.app.member-app .member-activity-page button.member-activity-tab.active,

.app.member-app .member-activity-page button.member-activity-tab:hover{

  background:#eff6ff!important;

  color:#1d4ed8!important;

  border-color:#bfdbfe!important;

  filter:none!important;

}



/* Halaman Bantuan PUK dibuat netral agar nyaman dibaca. */

.app.member-app .member-help-page{padding-bottom:20px;}

.app.member-app .member-help-heading{margin-bottom:12px;}

.app.member-app .member-help-heading h3{margin:0 0 4px;color:#172033!important;font-size:17px;}

.app.member-app .member-help-heading p{margin:0;color:#64748b;font-size:12px;line-height:1.5;}

.app.member-app .member-help-card,

.app.member-app .member-help-detail-card{

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  box-shadow:0 7px 18px rgba(15,23,42,.05)!important;

}

.app.member-app .member-help-card{

  display:flex!important;

  align-items:center!important;

  gap:12px!important;

  padding:14px!important;

}

.app.member-app .member-help-icon{

  width:52px;

  height:52px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex:0 0 auto;

  border-radius:16px;

  background:#faf5ff;

  color:#7e22ce;

}

.app.member-app .member-help-copy span{display:block;color:#64748b;font-size:11px;font-weight:700;}

.app.member-app .member-help-copy h4{margin:3px 0 0;color:#172033;font-size:15px;line-height:1.35;}

.app.member-app .member-help-detail-card{padding:0!important;overflow:hidden!important;}

.app.member-app .member-help-row{

  display:grid;

  grid-template-columns:minmax(112px,.8fr) minmax(0,1.2fr);

  gap:12px;

  padding:13px 14px;

  border-bottom:1px solid #eef2f7;

}

.app.member-app .member-help-row:last-of-type{border-bottom:0;}

.app.member-app .member-help-row span{color:#64748b;font-size:12px;}

.app.member-app .member-help-row strong{color:#172033;font-size:12px;line-height:1.45;text-align:right;overflow-wrap:anywhere;}

.app.member-app .member-help-actions{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border-top:1px solid #eef2f7;}

.app.member-app .member-help-action{

  display:inline-flex!important;

  align-items:center!important;

  gap:7px!important;

  padding:9px 11px!important;

  border-radius:10px!important;

  background:#f8fafc!important;

  color:#475569!important;

  border:1px solid #dbe3ec!important;

  text-decoration:none!important;

  font-size:12px!important;

  font-weight:800!important;

}

.app.member-app .member-help-action:hover{background:#eff6ff!important;color:#1d4ed8!important;border-color:#bfdbfe!important;}

.app.member-app .member-help-action-primary{background:#ecfdf5!important;color:#047857!important;border-color:#a7f3d0!important;}

.app.member-app .member-help-action-primary:hover{background:#d1fae5!important;color:#047857!important;border-color:#6ee7b7!important;}

.app.member-app .member-help-empty{margin:0;padding:14px;color:#64748b;font-size:12px;line-height:1.5;border-top:1px solid #eef2f7;}

@media(max-width:420px){

  .app.member-app .member-home-quick-access button.member-action-card{min-height:110px!important;padding:12px 8px!important;}

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon{width:48px!important;height:48px!important;}

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon svg{width:30px!important;height:30px!important;}

  .app.member-app .member-help-row{grid-template-columns:1fr;gap:3px;}

  .app.member-app .member-help-row strong{text-align:left;}

}





/* Revisi 120 — Header Anggota: ikon lonceng dan logout ringkas + panel notifikasi portal */

.app.member-app .member-header-actions{

  display:flex!important;

  align-items:center!important;

  justify-content:flex-end!important;

  gap:8px!important;

  flex-shrink:0!important;

}

.app.member-app .member-header-action-btn{

  width:40px!important;

  height:40px!important;

  min-width:40px!important;

  padding:0!important;

  border-radius:12px!important;

  display:grid!important;

  place-items:center!important;

  position:relative!important;

  background:#ffffff!important;

  box-shadow:0 4px 12px rgba(15,23,42,.05)!important;

}

.app.member-app .member-header-action-btn svg{

  width:20px!important;

  height:20px!important;

  stroke-width:2.35!important;

}

.app.member-app .member-notification-btn{

  border:1px solid #d7e2ee!important;

  color:#23405f!important;

}

.app.member-app .member-notification-btn:hover{

  background:#f4f8fc!important;

  border-color:#b9cbe0!important;

  filter:none!important;

}

.app.member-app .member-logout-header-btn{

  border:1px solid #f1c7cf!important;

  color:#b4233f!important;

}

.app.member-app .member-logout-header-btn:hover{

  background:#fff7f8!important;

  border-color:#e7a8b5!important;

  filter:none!important;

}

.app.member-app .member-notification-count{

  top:-5px!important;

  right:-5px!important;

  min-width:17px!important;

  height:17px!important;

  font-size:9px!important;

}

#memberNotificationPortal{

  position:relative;

  z-index:1200;

}

body.member-notification-portal-active .notification-backdrop:not(.hidden){

  display:block!important;

  position:fixed!important;

  inset:0!important;

  z-index:1190!important;

  background:rgba(2,12,27,.22)!important;

}

body.member-notification-portal-active .notification-panel:not(.hidden){

  position:fixed!important;

  top:76px!important;

  right:18px!important;

  left:auto!important;

  bottom:auto!important;

  width:min(360px,calc(100vw - 28px))!important;

  z-index:1200!important;

}

@media screen and (max-width:700px){

  body.member-notification-portal-active .notification-backdrop:not(.hidden){

    background:rgba(2,12,27,.58)!important;

  }

  body.member-notification-portal-active .notification-panel:not(.hidden){

    top:50%!important;

    left:50%!important;

    right:auto!important;

    transform:translate(-50%,-50%)!important;

    width:calc(100vw - 28px)!important;

    max-width:420px!important;

  }

}

/* Pengaman untuk DOM cache lama: logout lama tidak lagi tampil di bawah grid. */

.app.member-app .member-quick-logout-link,

.app.member-app .member-profile-logout-link{

  display:none!important;

}



/* Revisi 121 — Profil PUK & Laporan PUK ringkas/dinamis */

.puk-profile-summary .section-header,

.puk-profile-editor .section-header,

.report-data-header{

  gap:14px;

  align-items:flex-start;

}

.puk-profile-summary .section-header h3,

.puk-profile-editor .section-header h3,

.report-data-header h3{

  margin-bottom:5px;

}

.puk-kta-notice{

  margin:0 0 16px;

  background:#eef6ff;

  border-color:#bfd8f5;

  color:#173e69;

}

.puk-info-grid > div{

  background:#f8fafc;

  border:1px solid #e5edf5;

  border-radius:12px;

  padding:12px;

}

.puk-info-grid b{

  display:block;

  color:#334155;

  font-size:12px;

}

.puk-info-grid p{

  margin:5px 0 0;

  color:#0f172a;

  font-size:14px;

}

.puk-address-highlight{

  margin-top:14px;

  display:grid;

  gap:5px;

  padding:14px;

  border:1px solid #c9dcef;

  border-radius:14px;

  background:#f2f8ff;

}

.puk-address-highlight span{

  color:#4b6684;

  font-size:12px;

  font-weight:800;

}

.puk-address-highlight strong{

  color:#0f2c4e;

  line-height:1.5;

}

.puk-asset-grid{

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:12px;

}

.puk-asset-box{

  min-height:118px;

  display:grid;

  grid-template-rows:auto 1fr;

  gap:10px;

  padding:12px;

  border:1px solid #e2eaf2;

  border-radius:14px;

  background:#fbfdff;

  text-align:center;

}

.puk-asset-box b{

  color:#334155;

  font-size:12px;

}

.puk-asset-box > div{

  display:grid;

  place-items:center;

}

.puk-asset-preview{max-height:54px;max-width:100%;object-fit:contain;border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px}

.puk-stamp-preview{max-height:68px;max-width:100%;object-fit:contain;border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px}



.report-summary-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:12px;

  margin:0 0 16px;

}

.report-summary-grid .stat{

  min-height:102px;

  margin:0;

  padding:14px 15px;

  border-left-width:4px;

  border-radius:14px;

}

.report-summary-grid .stat small{

  font-size:12px;

}

.report-summary-grid .stat b{

  margin-top:5px;

  font-size:27px;

}

.report-data-card{

  margin-top:16px;

}

.report-data-count{

  display:inline-flex;

  align-items:center;

  min-height:28px;

  padding:4px 10px;

  border-radius:999px;

  background:#edf5ff;

  color:#1f5c96;

  font-size:12px;

  font-weight:800;

  white-space:nowrap;

}

.report-table-controls{

  display:grid;

  grid-template-columns:minmax(200px,1.8fr) minmax(140px,.7fr) minmax(120px,.55fr);

  gap:10px;

  align-items:end;

  margin:14px 0;

}

.report-search-field,

.report-filter-field{

  display:grid;

  gap:5px;

}

.report-search-field span,

.report-filter-field span{

  color:#64748b;

  font-size:11px;

  font-weight:800;

}

.report-search-field input,

.report-filter-field select{

  width:100%;

  min-height:40px;

  padding:9px 11px;

  border:1px solid #d8e2ec;

  border-radius:10px;

  background:#fff;

  color:#0f172a;

}

.report-readonly-table th{white-space:nowrap}

.report-readonly-table td{vertical-align:middle}

.report-subvalue{display:block;margin-top:3px;color:#64748b;font-size:11px;font-weight:600}

.report-pagination{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding-top:12px;

  color:#64748b;

  font-size:12px;

}

.report-pagination-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}

.report-pagination-actions button:disabled{opacity:.48;cursor:not-allowed;filter:none}

@media (max-width:720px){

  .puk-asset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

  .puk-asset-box{min-height:102px;padding:9px 6px;font-size:11px}

  .puk-asset-preview{max-height:42px}

  .puk-stamp-preview{max-height:50px}

  .report-table-controls{grid-template-columns:1fr 1fr}

  .report-search-field{grid-column:1/-1}

  .report-pagination{align-items:flex-start;flex-direction:column}

}

@media (max-width:420px){

  .report-summary-grid{gap:10px}

  .report-summary-grid .stat{min-height:92px;padding:12px}

  .report-summary-grid .stat b{font-size:24px}

  .puk-asset-grid{grid-template-columns:1fr}

  .report-table-controls{grid-template-columns:1fr}

  .report-search-field{grid-column:auto}

}





/* Revisi 122 — Pemilihan PUK eksplisit bagi Superadmin pada Profil PUK & KTA */

.puk-selector-intro h3{margin:0 0 8px;color:#0f2444;}

.puk-selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px;}

.puk-selector-card{

  min-height:168px;

  padding:18px;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  text-align:left;

  gap:8px;

  color:#0f2444;

  background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 100%)!important;

  border:1px solid #dbe7f7!important;

  box-shadow:0 8px 20px rgba(15,23,42,.05);

}

.puk-selector-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,23,42,.10);}

.puk-selector-card:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px;}

.puk-selector-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#e8f0ff;color:#235ea9;}

.puk-selector-card strong{font-size:15px;line-height:1.3;color:#0f2444;}

.puk-selector-card small{font-size:12px;color:#64748b;line-height:1.4;}

.puk-selector-card em{margin-top:auto;font-size:12px;font-style:normal;font-weight:800;color:#235ea9;}

@media(max-width:640px){.puk-selector-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.puk-selector-card{min-height:150px;padding:14px;}.puk-selector-icon{width:42px;height:42px;}}





/* Revisi 124 — Dashboard tetap tampil apabila satu sumber data opsional bermasalah */

.dashboard-data-warning{

  margin:-4px 0 16px;

  padding:10px 12px;

  border:1px solid #f4d58d;

  border-radius:12px;

  background:#fff9e8;

  color:#7c5b00;

  font-size:12px;

  font-weight:700;

  line-height:1.45;

}

.dashboard-load-fallback{

  max-width:620px;

  margin:40px auto;

  text-align:center;

}

.dashboard-load-fallback h3{ margin-bottom:8px; }

.dashboard-load-fallback .actions{ justify-content:center; margin-top:16px; }

.dashboard-load-detail{

  margin:12px 0 0;

  padding:10px;

  border-radius:10px;

  background:#f8fafc;

  color:#475569;

  font-size:12px;

  line-height:1.45;

  overflow-wrap:anywhere;

}



/* PC/Desktop Layout Grid & Card Adjustments - Aesthetic square cards */

@media screen and (min-width: 901px) {

  .quick-access-grid,

  .app.member-app .member-home-quick-access .quick-access-grid {

    grid-template-columns: repeat(auto-fill, minmax(150px, 180px)) !important;

    gap: 16px !important;

    justify-content: flex-start !important;

  }



  .admin-dashboard-grid {

    grid-template-columns: repeat(4, 180px) !important;

    gap: 16px !important;

    justify-content: center !important;

  }



  .quick-card:not(.quick-logout-card),

  .admin-action-card,

  .admin-summary-card,

  .app.member-app .member-home-quick-access button.member-action-card:not(.quick-logout-card) {

    aspect-ratio: 1 / 1 !important;

    min-height: unset !important;

    height: auto !important;

    max-width: 180px !important;

    padding: 16px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    box-sizing: border-box !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

  }



  .quick-card:not(.quick-logout-card):not(.admin-summary-card):hover,

  .admin-action-card:hover,

  .app.member-app .member-home-quick-access button.member-action-card:not(.quick-logout-card):hover {

    transform: translateY(-4px) scale(1.02) !important;

    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;

  }



  /* Center icons and labels inside action/summary cards for consistent grid look */

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon {

    margin: 0 auto 8px !important;

  }

  

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label {

    text-align: center !important;

    margin-bottom: 4px !important;

  }

  

  .admin-quick-value {

    text-align: center !important;

    margin-top: 4px !important;

  }

}



/* Custom Searchable Select (Combobox) styling */

.searchable-select-wrapper {

  position: relative;

  width: 100%;

  min-width: 0;

}

.searchable-select-wrapper:has(.open) {

  z-index: 9999;

}

.searchable-select-trigger {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  min-width: 0;

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 10px 14px;

  background: #fff;

  cursor: pointer;

  font-size: 13px;

  font-weight: 700;

  color: var(--text);

  min-height: 40px;

  user-select: none;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.searchable-select-trigger:hover {

  border-color: #cbd5e1;

}

.searchable-select-trigger.open {

  border-color: var(--blue);

  box-shadow: 0 0 0 3px rgba(11, 79, 156, 0.12);

  border-bottom-left-radius: 0;

  border-bottom-right-radius: 0;

}

.searchable-select-label {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  flex: 1;

  text-align: left;

  min-width: 0;

}

.searchable-select-arrow {

  font-size: 9px;

  color: var(--muted);

  margin-left: 8px;

  transition: transform 0.2s ease;

}

.searchable-select-trigger.open .searchable-select-arrow {

  transform: rotate(180deg);

}



.searchable-select-dropdown {

  position: absolute;

  top: 100%;

  left: 0;

  right: 0;

  background: #fff;

  border: 1px solid #cbd5e1;

  border-top: none;

  border-bottom-left-radius: 12px;

  border-bottom-right-radius: 12px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  z-index: 1000;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}

.searchable-select-dropdown.hidden {

  display: none !important;

}



.searchable-select-search-box {

  padding: 8px;

  border-bottom: 1px solid var(--line);

  background: #f8fafc;

}

.searchable-select-search-input {

  width: 100%;

  padding: 8px 12px;

  border: 1px solid var(--line);

  border-radius: 8px;

  font-size: 12px;

  outline: none;

  background: #fff;

}

.searchable-select-search-input:focus {

  border-color: var(--blue);

}



.searchable-select-options {

  max-height: 200px;

  overflow-y: auto;

}

.searchable-select-option {

  padding: 10px 14px;

  font-size: 13px;

  font-weight: 600;

  color: #334155;

  cursor: pointer;

  text-align: left;

  transition: background 0.15s ease;

}

.searchable-select-option:hover {

  background: #f1f5f9;

}

.searchable-select-option.selected {

  background: #eff6ff;

  color: var(--blue);

  font-weight: 800;

}



/* =========================================================

   Aesthetic Mobile Grid Card layout (HP Tampilan Dinamis & Hidup)

   ========================================================= */

@media screen and (max-width: 900px) {

  /* Layout Grid: 4 columns on mobile exactly like the screenshot */

  .quick-access-grid,

  .app.member-app .member-home-quick-access .quick-access-grid,

  .admin-dashboard-grid {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 16px 8px !important; /* more vertical gap, tighter horizontal */

    width: 100% !important;

    justify-content: space-between !important;

    box-sizing: border-box !important;

  }



  /* Reset Card Box Styling to make them flat circular buttons with label below */

  .quick-card,

  .admin-action-card,

  .admin-summary-card,

  .app.member-app .member-home-quick-access button.member-action-card {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding: 4px 2px !important;

    margin: 0 !important;

    min-height: unset !important;

    height: auto !important;

    aspect-ratio: auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    text-align: center !important;

    border-radius: 0 !important;

    position: relative !important;

    transition: transform 0.2s ease, opacity 0.2s ease !important;

    -webkit-tap-highlight-color: transparent !important;

  }



  /* Active tap feedback */

  .quick-card:active,

  .admin-action-card:active,

  .admin-summary-card:active,

  .app.member-app .member-home-quick-access button.member-action-card:active {

    transform: scale(0.92) !important;

    opacity: 0.8 !important;

  }



  /* Icon wrapper: perfect circles with premium gradients & dropshadows */

  .quick-card .quick-icon,

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon {

    width: 58px !important;

    height: 58px !important;

    border-radius: 50% !important; /* Perfect circle */

    margin: 0 auto 8px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08) !important;

    transition: all 0.2s ease !important;

    flex-shrink: 0 !important;

  }



  /* Premium theme/color options for circles */

  /* Blue tone */

  .card-blue .quick-icon,

  .member-quick-card-kta .quick-icon,

  .quick-card.card-blue .quick-icon {

    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;

    color: #2563eb !important;

    border: 1px solid rgba(37, 99, 235, 0.15) !important;

  }

  

  /* Green tone */

  .card-green .quick-icon,

  .member-quick-card-profile .quick-icon,

  .quick-card.card-green .quick-icon {

    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;

    color: #059669 !important;

    border: 1px solid rgba(5, 150, 105, 0.15) !important;

  }



  /* Orange/Yellow/Red tone */

  .card-orange .quick-icon,

  .member-quick-card-status .quick-icon,

  .quick-card.card-orange .quick-icon {

    background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;

    color: #ea580c !important;

    border: 1px solid rgba(234, 88, 12, 0.15) !important;

  }



  /* Purple/Indigo/Pink tone */

  .card-purple .quick-icon,

  .member-quick-card-help .quick-icon,

  .quick-card.card-purple .quick-icon {

    background: linear-gradient(135deg, #faf5ff, #f3e8ff) !important;

    color: #7e22ce !important;

    border: 1px solid rgba(126, 34, 206, 0.15) !important;

  }



  /* Make SVG icons scale beautifully inside the 58px circles */

  .quick-card .quick-icon svg,

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon svg {

    width: 26px !important;

    height: 26px !important;

    stroke-width: 2.2 !important;

  }



  /* Labels placed underneath the circular icon, clean, micro-animated */

  .quick-card .quick-label,

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label,

  .app.member-app .member-home-quick-access button.member-action-card .quick-label {

    font-size: 11px !important;

    font-weight: 700 !important;

    color: #1e293b !important;

    line-height: 1.3 !important;

    margin: 0 !important;

    padding: 0 2px !important;

    white-space: normal !important;

    word-break: break-word !important;

    text-align: center !important;

  }



  /* Specific styling to ensure summary value is rendered cleanly under icon */

  .admin-summary-card .admin-quick-value {

    font-size: 14px !important;

    font-weight: 800 !important;

    color: #0f172a !important;

    margin: 4px 0 1px 0 !important;

    text-align: center !important;

    line-height: 1 !important;

  }

  

  .admin-summary-card .quick-label {

    font-size: 10px !important;

    color: #64748b !important;

    font-weight: 600 !important;

  }



  /* Hide descriptions on mobile screens to maintain clean layout */

  .admin-quick-desc {

    display: none !important;

  }



  /* Align badges perfectly on the top-right of the circle icon */

  .admin-quick-badge,

  .admin-action-card .admin-quick-badge {

    position: absolute !important;

    top: -2px !important;

    right: calc(50% - 29px) !important;

    background: #ef4444 !important;

    color: #ffffff !important;

    font-size: 8px !important;

    font-weight: 800 !important;

    padding: 2px 6px !important;

    border-radius: 99px !important;

    border: 1.5px solid #ffffff !important;

    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;

    line-height: 1 !important;

    transform: none !important;

  }



  /* Logout button styling at the bottom of the grid */

  .app.member-app .quick-card.member-action-card.quick-logout-card {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    min-height: 48px !important;

    margin-top: 12px !important;

    border-radius: 12px !important;

    border: 1px solid #fee2e2 !important;

    background: #fff5f5 !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    padding: 10px 16px !important;

    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.05) !important;

  }

  .app.member-app .quick-card.member-action-card.quick-logout-card:active {

    background: #fef2f2 !important;

    transform: scale(0.98) !important;

  }

  .app.member-app .quick-card.member-action-card.quick-logout-card .quick-icon {

    width: unset !important;

    height: unset !important;

    background: transparent !important;

    color: #dc2626 !important;

    border: none !important;

    box-shadow: none !important;

    margin: 0 !important;

  }

  .app.member-app .quick-card.member-action-card.quick-logout-card .quick-icon svg {

    width: 18px !important;

    height: 18px !important;

  }

  .app.member-app .quick-card.member-action-card.quick-logout-card .quick-label {

    color: #dc2626 !important;

    font-size: 13px !important;

    font-weight: 800 !important;

  }

}









/* =========================================================

   Revisi 131 — Mobile Launcher Grid untuk Admin, Pusat, dan Anggota

   Tujuan: menu mobile terasa seperti aplikasi native; ikon hidup,

   rapat, mudah dipindai, dan label tetap terbaca pada layar kecil.

   Berlaku hanya untuk dashboard/akses cepat dan tidak mengubah

   tabel, formulir, maupun tampilan desktop.

   ========================================================= */

@media screen and (max-width: 900px) {

  /* Ruang konten dibuat nyaman untuk launcher grid dan bottom navigation anggota. */

  .content{

    padding:16px 14px 30px!important;

  }

  .app.member-app .content{

    padding-bottom:104px!important;

  }



  /* Hero tetap menjadi kartu utama seperti banner pada aplikasi mobile. */

  .admin-dashboard-hero{

    min-height:126px!important;

    padding:18px 18px!important;

    border-radius:22px!important;

    background:

      radial-gradient(circle at 90% 16%,rgba(255,255,255,.19),transparent 34%),

      linear-gradient(135deg,#075a9c 0%,#0d3c78 58%,#082a58 100%)!important;

    box-shadow:0 14px 26px rgba(8,51,95,.16)!important;

  }

  .admin-dashboard-hero h2{

    max-width:235px!important;

    font-size:19px!important;

    line-height:1.22!important;

  }

  .admin-dashboard-hero p{

    max-width:260px!important;

    font-size:12px!important;

    line-height:1.45!important;

  }

  .admin-dashboard-role{

    margin-top:8px!important;

    font-size:11px!important;

  }



  /* Pemisah bagian ringkas agar halaman tidak terasa penuh atau datar. */

  .quick-access-section,

  .admin-dashboard-section{

    margin-bottom:26px!important;

  }

  .quick-access-section h3,

  .info-section h3{

    display:flex!important;

    align-items:center!important;

    gap:8px!important;

    margin:0 0 13px!important;

    color:#172033!important;

    font-size:15px!important;

    line-height:1.25!important;

  }

  .quick-access-section h3::before{

    content:'';

    width:4px;

    height:17px;

    border-radius:999px;

    background:linear-gradient(180deg,#2f98dc,#1267bd);

    flex:0 0 auto;

  }

  .app.member-app .member-home-quick-access h3::before{

    background:linear-gradient(180deg,#16a34a,#087a3d);

  }



  /* Empat kartu per baris seperti launcher aplikasi; tiap kartu lebih konsisten. */

  .quick-access-grid,

  .admin-dashboard-grid,

  .app.member-app .member-home-quick-access .quick-access-grid{

    display:grid!important;

    grid-template-columns:repeat(4,minmax(0,1fr))!important;

    column-gap:8px!important;

    row-gap:20px!important;

    width:100%!important;

    align-items:start!important;

    justify-content:stretch!important;

  }

  .admin-summary-grid{

    row-gap:14px!important;

  }



  /* Tile bersih: ikon bundar + tulisan di bawah, tanpa kotak besar. */

  .quick-card,

  .admin-action-card,

  .admin-summary-card,

  .app.member-app .member-home-quick-access button.member-action-card{

    appearance:none!important;

    width:100%!important;

    min-width:0!important;

    min-height:0!important;

    height:auto!important;

    margin:0!important;

    padding:0 1px!important;

    border:0!important;

    border-radius:0!important;

    background:transparent!important;

    box-shadow:none!important;

    color:#172033!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    gap:0!important;

    position:relative!important;

    text-align:center!important;

    cursor:pointer!important;

    -webkit-tap-highlight-color:transparent!important;

    transition:transform .18s ease,opacity .18s ease!important;

  }

  .admin-summary-card{

    cursor:default!important;

  }

  .quick-card:hover,

  .admin-action-card:hover,

  .admin-summary-card:hover,

  .app.member-app .member-home-quick-access button.member-action-card:hover{

    transform:translateY(-2px)!important;

    background:transparent!important;

    box-shadow:none!important;

    filter:none!important;

  }

  .quick-card:active,

  .admin-action-card:active,

  .app.member-app .member-home-quick-access button.member-action-card:active{

    transform:scale(.93)!important;

    opacity:.78!important;

  }



  /* Ukuran responsif: normal 60 px, tetap aman dan terbaca pada layar 320 px. */

  .quick-card .quick-icon,

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon{

    width:clamp(52px,15vw,62px)!important;

    height:clamp(52px,15vw,62px)!important;

    min-width:0!important;

    min-height:0!important;

    margin:0 auto 8px!important;

    border-radius:50%!important;

    display:grid!important;

    place-items:center!important;

    box-shadow:0 7px 15px rgba(15,23,42,.10)!important;

    position:relative!important;

    overflow:visible!important;

  }

  .quick-card .quick-icon::after,

  .admin-action-card .quick-icon::after,

  .admin-summary-card .quick-icon::after,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon::after{

    content:'';

    position:absolute;

    inset:4px auto auto 8px;

    width:40%;

    height:20%;

    border-radius:50%;

    background:rgba(255,255,255,.56);

    transform:rotate(-22deg);

    pointer-events:none;

  }

  .quick-card .quick-icon svg,

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon svg{

    width:28px!important;

    height:28px!important;

    stroke-width:2.25!important;

    position:relative!important;

    z-index:1!important;

  }



  /* Palet lembut agar tiap fungsi cepat dikenali, tetap selaras dengan tema aplikasi. */

  .card-blue .quick-icon,

  .member-quick-card-kta .quick-icon,

  .quick-card.card-blue .quick-icon{

    background:linear-gradient(135deg,#dff3ff,#c5e8ff)!important;

    color:#087ac0!important;

    border:1px solid rgba(8,122,192,.14)!important;

  }

  .card-green .quick-icon,

  .member-quick-card-profile .quick-icon,

  .quick-card.card-green .quick-icon{

    background:linear-gradient(135deg,#dff9ee,#c8f1dd)!important;

    color:#07824a!important;

    border:1px solid rgba(7,130,74,.14)!important;

  }

  .card-orange .quick-icon,

  .member-quick-card-status .quick-icon,

  .quick-card.card-orange .quick-icon{

    background:linear-gradient(135deg,#fff1de,#ffe2bc)!important;

    color:#dd7212!important;

    border:1px solid rgba(221,114,18,.14)!important;

  }

  .card-purple .quick-icon,

  .member-quick-card-help .quick-icon,

  .quick-card.card-purple .quick-icon{

    background:linear-gradient(135deg,#f2e8ff,#e6d3ff)!important;

    color:#7c36bd!important;

    border:1px solid rgba(124,54,189,.14)!important;

  }



  /* Label terkunci ke tinggi dua baris: baris ikon tidak terlihat bergeser. */

  .quick-card .quick-label,

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label,

  .app.member-app .member-home-quick-access button.member-action-card .quick-label{

    min-height:2.72em!important;

    display:flex!important;

    align-items:flex-start!important;

    justify-content:center!important;

    width:100%!important;

    margin:0!important;

    padding:0 1px!important;

    color:#1f2937!important;

    font-size:11px!important;

    font-weight:750!important;

    line-height:1.35!important;

    letter-spacing:-.01em!important;

    text-align:center!important;

    white-space:normal!important;

    overflow-wrap:anywhere!important;

    word-break:normal!important;

  }



  /* Nilai ringkasan dipertahankan kecil namun jelas, tidak membuat ikon terlalu besar. */

  .admin-summary-card .admin-quick-value{

    order:3!important;

    width:100%!important;

    margin:1px 0 0!important;

    color:#0f3e72!important;

    font-size:15px!important;

    font-weight:900!important;

    line-height:1.05!important;

  }

  .admin-summary-card .quick-label{

    min-height:1.35em!important;

    color:#5d6b7c!important;

    font-size:9.5px!important;

    font-weight:700!important;

  }



  /* Badge ditempatkan di tepi lingkaran seperti notifikasi aplikasi. */

  .admin-quick-badge,

  .admin-action-card .admin-quick-badge{

    top:-3px!important;

    right:calc(50% - clamp(28px,7.5vw,31px))!important;

    min-width:19px!important;

    height:19px!important;

    padding:0 5px!important;

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;

    border:2px solid #fff!important;

    border-radius:999px!important;

    background:#ef4444!important;

    color:#fff!important;

    font-size:8px!important;

    font-weight:900!important;

    line-height:1!important;

    box-shadow:0 3px 8px rgba(239,68,68,.32)!important;

    z-index:3!important;

  }



  /* Kartu akses cepat anggota tetap ada 2x2 secara fungsi, tetapi divisualkan 4 kolom jika menu bertambah. */

  .app.member-app .member-home-quick-access .member-shortcut-grid{

    row-gap:20px!important;

  }

}



/* Ponsel sangat sempit: empat kolom tetap nyaman tanpa ikon/teks terasa terlalu besar. */

@media screen and (max-width: 360px) {

  .quick-access-grid,

  .admin-dashboard-grid,

  .app.member-app .member-home-quick-access .quick-access-grid{

    column-gap:5px!important;

    row-gap:18px!important;

  }

  .quick-card .quick-icon,

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon{

    width:52px!important;

    height:52px!important;

    margin-bottom:7px!important;

  }

  .quick-card .quick-icon svg,

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon svg{

    width:25px!important;

    height:25px!important;

  }

  .quick-card .quick-label,

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label,

  .app.member-app .member-home-quick-access button.member-action-card .quick-label{

    font-size:10px!important;

    line-height:1.28!important;

  }

}





/* =========================================================

   Revisi 132 — Laporan PUK: Mobile Summary Launcher Grid

   Ringkasan laporan Admin PUK dan Superadmin memakai pola

   ikon bundar + label + nilai, agar konsisten dengan dashboard.

   ========================================================= */

@media screen and (max-width:900px){

  .report-summary-launcher{

    display:grid!important;

    grid-template-columns:repeat(4,minmax(0,1fr))!important;

    column-gap:8px!important;

    row-gap:20px!important;

    width:100%!important;

    margin:4px 0 22px!important;

    align-items:start!important;

  }

  .report-summary-launcher .report-stat-tile{

    min-width:0!important;

    min-height:0!important;

    margin:0!important;

    padding:0 1px!important;

    border:0!important;

    border-radius:0!important;

    background:transparent!important;

    box-shadow:none!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    text-align:center!important;

    position:relative!important;

  }

  .report-summary-launcher .report-stat-icon{

    width:clamp(52px,15vw,62px)!important;

    height:clamp(52px,15vw,62px)!important;

    margin:0 auto 8px!important;

    border-radius:50%!important;

    display:grid!important;

    place-items:center!important;

    position:relative!important;

    overflow:visible!important;

    box-shadow:0 7px 15px rgba(15,23,42,.10)!important;

  }

  .report-summary-launcher .report-stat-icon::after{

    content:'';

    position:absolute;

    inset:4px auto auto 8px;

    width:40%;

    height:20%;

    border-radius:50%;

    background:rgba(255,255,255,.56);

    transform:rotate(-22deg);

    pointer-events:none;

  }

  .report-summary-launcher .report-stat-icon svg{

    width:27px!important;

    height:27px!important;

    stroke-width:2.25!important;

    position:relative!important;

    z-index:1!important;

  }

  .report-summary-launcher .report-stat-tile small{

    min-height:2.72em!important;

    width:100%!important;

    margin:0!important;

    padding:0 1px!important;

    display:flex!important;

    align-items:flex-start!important;

    justify-content:center!important;

    color:#1f2937!important;

    font-size:10.5px!important;

    font-weight:750!important;

    line-height:1.32!important;

    text-align:center!important;

    white-space:normal!important;

    overflow-wrap:anywhere!important;

  }

  .report-summary-launcher .report-stat-tile b{

    min-height:1.15em!important;

    width:100%!important;

    margin:2px 0 0!important;

    color:#0f3e72!important;

    font-size:15px!important;

    font-weight:900!important;

    line-height:1.12!important;

    text-align:center!important;

    white-space:nowrap!important;

  }

  .report-stat-blue .report-stat-icon{

    background:linear-gradient(135deg,#dff3ff,#c5e8ff)!important;

    color:#087ac0!important;

    border:1px solid rgba(8,122,192,.14)!important;

  }

  .report-stat-green .report-stat-icon{

    background:linear-gradient(135deg,#dff9ee,#c8f1dd)!important;

    color:#07824a!important;

    border:1px solid rgba(7,130,74,.14)!important;

  }

  .report-stat-orange .report-stat-icon{

    background:linear-gradient(135deg,#fff1de,#ffe2bc)!important;

    color:#dd7212!important;

    border:1px solid rgba(221,114,18,.14)!important;

  }

  .report-stat-purple .report-stat-icon{

    background:linear-gradient(135deg,#f2e8ff,#e6d3ff)!important;

    color:#7c36bd!important;

    border:1px solid rgba(124,54,189,.14)!important;

  }

}

@media screen and (max-width:360px){

  .report-summary-launcher{

    column-gap:5px!important;

    row-gap:18px!important;

  }

  .report-summary-launcher .report-stat-icon{

    width:52px!important;

    height:52px!important;

    margin-bottom:7px!important;

  }

  .report-summary-launcher .report-stat-icon svg{

    width:25px!important;

    height:25px!important;

  }

  .report-summary-launcher .report-stat-tile small{

    font-size:9.5px!important;

    line-height:1.28!important;

  }

  .report-summary-launcher .report-stat-tile b{

    font-size:14px!important;

  }

}



/* ===== Edit Foto Profil Langsung dari Dashboard Anggota ===== */

.dashboard-avatar-container {

  position: relative;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  cursor: pointer;

  overflow: hidden;

  flex-shrink: 0;

  border: 2px solid rgba(255,255,255,0.15);

  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

}

.dashboard-avatar-container img.dashboard-avatar {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.dashboard-avatar-container .dashboard-avatar-hover {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity 0.2s ease;

  z-index: 2;

}

.dashboard-avatar-container:hover .dashboard-avatar-hover {

  opacity: 1 !important;

}



/* Fix vertical stretching of form fields in grid layouts */

.field {

  align-self: start;

}





/* ===== Fix Tampilan Login pada Layar PC/Desktop (Agar Tidak Mengalami Pergeseran / Scroll Kebawah) ===== */

@media (min-width: 701px) {

  .login-page {

    height: 100vh !important;

    min-height: 100vh !important;

    max-height: 100vh !important;

    overflow: hidden !important;

    padding: 20px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 15px !important; /* Spasi aman antara form dan copyright agar tidak menumpuk */

  }

  

  .login-card {

    padding: 24px 28px !important;

    border-radius: 20px !important;

    margin: 0 !important;

    width: 410px !important;

    overflow: hidden !important;

  }



  .login-logo-container {

    margin-bottom: 12px !important;

  }



  .login-logo-container img {

    height: 65px !important;

  }



  .login-card h1 {

    font-size: 24px !important;

    margin-bottom: 4px !important;

  }



  .login-card p {

    font-size: 13px !important;

    line-height: 1.35 !important;

    margin-bottom: 14px !important;

  }



  .login-card input {

    padding: 11px 12px !important;

    margin: 5px 0 !important;

    font-size: 13.5px !important;

  }



  .password-wrapper {

    margin: 5px 0 !important;

  }



  .password-wrapper input {

    padding: 11px 40px 11px 12px !important;

    margin: 0 !important;

    font-size: 13.5px !important;

  }



  .login-card button {

    margin: 6px 0 !important;

    padding: 10px 12px !important;

    font-size: 13.5px !important;

  }



  .member-login-help {

    font-size: 11px !important;

    margin: 8px 0 0 !important;

    padding: 8px 10px !important;

  }



  .login-card small {

    margin-top: 6px !important;

    font-size: 11px !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;

  }



  .login-copyright {

    position: relative !important;

    left: auto !important;

    right: auto !important;

    bottom: auto !important;

    margin: 0 !important;

    text-align: center !important;

    font-size: 11px !important;

    color: rgba(255, 255, 255, 0.92) !important;

    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.48) !important;

    z-index: 2 !important;

  }

}



/* Global adjustment for login small text readability */

.login-card small {

  color: #ffffff !important;

  font-weight: 700 !important;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;

}











/* ===== Overrides for Classic (Blue) Mode in member app to replace red colors with blue ===== */

.admin-mode-classic .quick-card.member-action-card {

  background: linear-gradient(135deg, #FFFFFF 0%, #eff6ff 100%) !important;

  border: 1px solid #c8dcf5 !important;

  border-left: 4px solid #173a63 !important;

  box-shadow: 0 10px 24px rgba(23, 58, 99, 0.08) !important;

}



.admin-mode-classic .quick-card.member-action-card .quick-icon {

  background: linear-gradient(135deg, #173a63, #2e6fae) !important;

  box-shadow: 0 8px 16px rgba(23, 58, 99, 0.15) !important;

}



.admin-mode-classic .quick-card.member-action-card .quick-label {

  color: #173a63 !important;

}



.admin-mode-classic .member-photo-action {

  background: linear-gradient(135deg, #173a63, #2e6fae) !important;

  box-shadow: 0 5px 12px rgba(23, 58, 99, 0.15) !important;

}



.admin-mode-classic .dash-hero {

  background: linear-gradient(135deg, #173a63 0%, #102846 100%) !important;

}



.admin-mode-classic .stat {

  border-left-color: #173a63 !important;

}



.admin-mode-classic .stat b {

  color: #173a63 !important;

}



.admin-mode-classic th {

  background: #eff6ff !important;

  color: #173a63 !important;

}



.admin-mode-classic tr:hover td {

  background: #f5f9ff !important;

}



.admin-mode-classic button:not(.danger):not(.admin-enable) {

  background: linear-gradient(135deg, #173a63, #2e6fae) !important;

}



.admin-mode-classic button.btn-secondary,

.admin-mode-classic .btn-secondary {

  background: #eff6ff !important;

  color: #173a63 !important;

  border: 1px solid #c8dcf5 !important;

}



.admin-mode-classic .card {

  border: 1px solid #c8dcf5 !important;

  box-shadow: 0 10px 26px rgba(23, 58, 99, 0.05) !important;

}



.admin-mode-classic .card:hover {

  box-shadow: 0 14px 32px rgba(23, 58, 99, 0.08) !important;

}



.admin-mode-classic .topbar h2,

.admin-mode-classic .card h3,

.admin-mode-classic .quick-access-section h3,

.admin-mode-classic .info-section h3 {

  color: #173a63 !important;

}



.admin-mode-classic .field input:focus,

.admin-mode-classic .field select:focus,

.admin-mode-classic .field textarea:focus {

  outline: 2px solid rgba(23, 58, 99, 0.1) !important;

  border-color: #173a63 !important;

}



/* ===== Hilangkan area kecil (background & border) yang mengelilingi logo atas di sidebar ===== */

#app .sidebar .brand-panel .brand-logos,

.app .brand-panel .brand-logos,

.brand-panel .brand-logos {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

}



/* ===== Fitur Sembunyikan KTA (Blur) ===== */

.kta-flip-container.kta-hidden-mode .kta-flip-front,

.kta-flip-container.kta-hidden-mode .kta-flip-back {

  filter: blur(14px) !important;

  opacity: 0.55 !important;

}

.kta-flip-container.kta-hidden-mode {

  pointer-events: none !important;

}



/* ===== Penyelarasan background brand-panel (logo area) atas berdasarkan mode aktif ===== */

#app.admin-mode-emerald .sidebar .brand-panel {

  background-color: #12372a !important;

  background-image: linear-gradient(145deg, #1a4c3a 0%, #12372a 100%) !important;

  border: 1px solid rgba(180, 230, 200, 0.2) !important;

}

#app.admin-mode-dark .sidebar .brand-panel {

  background-color: #18222d !important;

  background-image: linear-gradient(145deg, #222d3d 0%, #18222d 100%) !important;

  border: 1px solid rgba(200, 210, 220, 0.15) !important;

}

#app.admin-mode-classic .sidebar .brand-panel {

  background-color: #122f52 !important;

  background-image: linear-gradient(145deg, #1d4b7c 0%, #102846 100%) !important;

  border: 1px solid rgba(190, 219, 246, 0.26) !important;

}



/* ===== Sidebar Layout Optimization (Thin, Visible Scrollbar for Easy Navigation) ===== */

@media (min-width: 901px) {

  .sidebar {

    height: 100vh !important;

    overflow-y: auto !important; /* Enable scrolling for the entire sidebar */

    display: flex !important;

    flex-direction: column !important;

    scrollbar-width: thin !important; /* Firefox: thin scrollbar */

    scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;

  }

  /* Custom scrollbar for Webkit (Chrome, Safari, Edge) */

  .sidebar::-webkit-scrollbar {

    width: 6px !important;

  }

  .sidebar::-webkit-scrollbar-track {

    background: transparent !important;

  }

  .sidebar::-webkit-scrollbar-thumb {

    background-color: rgba(255, 255, 255, 0.25) !important;

    border-radius: 3px !important;

  }

  .sidebar::-webkit-scrollbar-thumb:hover {

    background-color: rgba(255, 255, 255, 0.45) !important;

  }

}



/* Sembunyikan detail nama PUK pada sidebar halaman anggota (tampilan PC) */

@media (min-width: 901px) {

  .app.member-app .sidebar-identity-detail {

    display: none !important;

  }

}





/* ===== Visual Feedback for Refresh Button ===== */

.topbar-refresh-button {

  width: 46px;

  height: 46px;

  padding: 0 !important;

  border-radius: 14px !important;

  display: grid;

  place-items: center;

  cursor: pointer;

  background: #ffffff !important;

  color: var(--admin-accent-deep, #214c7a) !important;

  border: 1px solid var(--admin-accent-line, #d7e4f3) !important;

  box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;

  transition: all 0.2s ease;

  font-size: 20px;

}

.topbar-refresh-button:hover {

  background: var(--admin-accent-soft, #f2f7fc) !important;

  transform: translateY(-1px);

}

.topbar-refresh-button:active {

  transform: translateY(0);

}

.app.admin-mode-emerald .topbar-refresh-button {

  color: var(--admin-accent-deep) !important;

  border-color: var(--admin-accent-line) !important;

}

.app.admin-mode-emerald .topbar-refresh-button:hover {

  background: var(--admin-accent-soft) !important;

}

.app.admin-mode-dark .topbar-refresh-button {

  color: var(--admin-accent-deep) !important;

  border-color: var(--admin-accent-line) !important;

}

.app.admin-mode-dark .topbar-refresh-button:hover {

  background: var(--admin-accent-soft) !important;

}



@keyframes spin {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}

.topbar-refresh-button.spinning svg,

.topbar-refresh-button.spinning span {

  animation: spin 0.8s linear infinite;

}



/* ===== Warna icon refresh halaman anggota putih agar kontras dengan background gelap ===== */

.app.member-app .topbar-refresh-button {

  color: #ffffff !important;

  border-color: rgba(255, 255, 255, 0.25) !important;

  background: rgba(255, 255, 255, 0.1) !important;

  box-shadow: none !important;

}

.app.member-app .topbar-refresh-button:hover {

  background: rgba(255, 255, 255, 0.2) !important;

  border-color: rgba(255, 255, 255, 0.4) !important;

}



/* ===== theme-dark: Full Dark Mode Support (Revisi 125) ===== */

body.theme-dark {

  background: #090d16 !important;

  color: #f8fafc !important;

  --text: #f8fafc;

  --muted: #94a3b8;

  --line: #1e293b;

  --soft: #1e293b;

}



body.theme-dark .topbar h2,

body.theme-dark .section-header h3,

body.theme-dark .card h3,

body.theme-dark .modal-head h3,

body.theme-dark .member-help-heading h3,

body.theme-dark .modal-card h3 {

  color: #f8fafc !important;

}



body.theme-dark .card,

body.theme-dark .stat,

body.theme-dark .admin-dashboard-mock,

body.theme-dark .modal-card,

body.theme-dark .request-profile-card,

body.theme-dark .kta-preview-card,

body.theme-dark .member-help-card {

  background: #151d30 !important;

  border-color: #27354f !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;

}



body.theme-dark .stat b {

  color: #60a5fa !important;

}



body.theme-dark .stat small,

body.theme-dark .muted,

body.theme-dark .notice-warning-banner span {

  color: #94a3b8 !important;

}



body.theme-dark table {

  background: #151d30 !important;

}



body.theme-dark th {

  background: #0d1424 !important;

  color: #94a3b8 !important;

  border-bottom: 1px solid #27354f !important;

}



body.theme-dark td {

  border-bottom: 1px solid #27354f !important;

  color: #cbd5e1 !important;

}



body.theme-dark tr:hover td {

  background: #1e293b !important;

}



body.theme-dark .field span,

body.theme-dark .search-box span {

  color: #cbd5e1 !important;

}



body.theme-dark .field input,

body.theme-dark .field select,

body.theme-dark .field textarea,

body.theme-dark .search-box input,

body.theme-dark .search-input,

body.theme-dark .toolbar-grid select,

body.theme-dark .searchable-select-trigger {

  background: #0d1424 !important;

  color: #f8fafc !important;

  border-color: #27354f !important;

}



body.theme-dark .searchable-select-dropdown {

  background: #151d30 !important;

  border-color: #27354f !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;

}



body.theme-dark .searchable-select-search {

  background: #0d1424 !important;

  color: #f8fafc !important;

  border-color: #27354f !important;

}



body.theme-dark .searchable-select-option:hover {

  background: #1e293b !important;

}



body.theme-dark .searchable-select-option.selected {

  background: #2563eb !important;

  color: #ffffff !important;

}



body.theme-dark .btn-secondary {

  background: #27354f !important;

  color: #f8fafc !important;

}



body.theme-dark .btn-secondary:hover {

  background: #334668 !important;

}



body.theme-dark .notice {

  background: #1e1b4b !important;

  border-color: #312e81 !important;

  color: #e0e7ff !important;

}



body.theme-dark .app.admin-mode-dark .notification-button {

  color: #cbd5e1 !important;

  border-color: #27354f !important;

  background: transparent !important;

}



body.theme-dark .app.admin-mode-dark .notification-button:hover {

  background: #1e293b !important;

}



body.theme-dark .app.admin-mode-dark .topbar-refresh-button {

  color: #cbd5e1 !important;

  border-color: #27354f !important;

  background: transparent !important;

}



body.theme-dark .app.admin-mode-dark .topbar-refresh-button:hover {

  background: #1e293b !important;

}



body.theme-dark .tab-row button {

  background: #151d30 !important;

  color: #94a3b8 !important;

  border: 1px solid #27354f !important;

}



body.theme-dark .tab-row button.active {

  background: #f2c94c !important;

  color: #0f172a !important;

  border-color: #f2c94c !important;

}



body.theme-dark .approval-pending {

  background: rgba(245, 158, 11, 0.15) !important;

  color: #fbbf24 !important;

}



body.theme-dark .approval-approved {

  background: rgba(16, 185, 129, 0.15) !important;

  color: #34d399 !important;

}



body.theme-dark .approval-rejected {

  background: rgba(239, 68, 68, 0.15) !important;

  color: #f87171 !important;

}



body.theme-dark .notice-warning-banner {

  background: #271616 !important;

  border-color: #5a2323 !important;

  color: #feb2b2 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;

}



body.theme-dark .notice-warning-banner b {

  color: #fca5a5 !important;

}



body.theme-dark .mock-row {

  background: #0d1424 !important;

  border-color: #27354f !important;

  color: #f8fafc !important;

}



body.theme-dark .mock-row .nip {

  color: #94a3b8 !important;

}



body.theme-dark .circle-progress::before {

  background: #151d30 !important;

}



body.theme-dark .circle-progress .circle-inner {

  color: #f8fafc !important;

}



/* Dark Mode support overrides for Member Profile page */

body.theme-dark .app.member-app .member-profile-page .card,

body.theme-dark .app.member-app .member-profile-page .profile-accordion-card,

body.theme-dark .app.member-app .member-profile-page .profile-header-card,

body.theme-dark .member-profile-overview.card,

body.theme-dark .member-profile-detail-card {

  background: #151d30 !important;

  border-color: #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .card h3,

body.theme-dark .app.member-app .member-profile-page .profile-header-card h3,

body.theme-dark .member-profile-detail-heading h3,

body.theme-dark .member-profile-overview-copy h3,

body.theme-dark .member-profile-menu-heading h3 {

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-header {

  background: #151d30 !important;

  color: #f8fafc !important;

  border-color: #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-header:hover,

body.theme-dark .app.member-app .member-profile-page .profile-accordion-header.active {

  background: #1e293b !important;

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-header.active {

  border-bottom: 1px solid #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-header span,

body.theme-dark .app.member-app .member-profile-page .profile-accordion-content span,

body.theme-dark .member-profile-info-row > strong {

  color: #cbd5e1 !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-content {

  background: #151d30 !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-content [style*="color: var(--muted)"],

body.theme-dark .member-profile-info-row > span,

body.theme-dark .member-profile-detail-heading p,

body.theme-dark .member-profile-overview-copy p,

body.theme-dark .member-profile-menu-heading p {

  color: #94a3b8 !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-content [style*="border-bottom"] {

  border-color: #27354f !important;

}



/* Button & Link overrides */

body.theme-dark .app.member-app button.member-profile-back,

body.theme-dark button.member-profile-back {

  background: transparent !important;

  color: #60a5fa !important;

}



body.theme-dark .app.member-app button.member-profile-back:hover,

body.theme-dark button.member-profile-back:hover {

  background: rgba(96, 165, 250, 0.15) !important;

  color: #93c5fd !important;

}



body.theme-dark .app.member-app button.member-profile-file-link,

body.theme-dark .app.member-app button.member-profile-edit-inline,

body.theme-dark button.member-profile-file-link,

body.theme-dark button.member-profile-edit-inline {

  background: #1d4ed8 !important;

  color: #ffffff !important;

  border: 1px solid #3b82f6 !important;

}



body.theme-dark .app.member-app button.member-profile-file-link:hover,

body.theme-dark .app.member-app button.member-profile-edit-inline:hover,

body.theme-dark button.member-profile-file-link:hover,

body.theme-dark button.member-profile-edit-inline:hover {

  background: #2563eb !important;

  border-color: #60a5fa !important;

}



body.theme-dark .app.member-app .member-profile-page .member-edit-profile-button {

  background: #1e293b !important;

  color: #cbd5e1 !important;

  border: 1px solid #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .member-edit-profile-button span {

  color: #cbd5e1 !important;

}



body.theme-dark .app.member-app .member-profile-page .member-photo-action,

body.theme-dark .app.member-app .member-profile-page .member-photo-action.member-photo-action-kta {

  background: #1e293b !important;

  color: #cbd5e1 !important;

  border-color: #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .member-photo-action:hover,

body.theme-dark .app.member-app .member-profile-page .member-photo-action.member-photo-action-kta:hover {

  background: #27354f !important;

  border-color: #3b82f6 !important;

}



body.theme-dark .app.member-app .member-profile-page .member-photo-action span {

  color: #cbd5e1 !important;

}



body.theme-dark .app.member-app .member-profile-page .member-kta-number {

  background: #0d1424 !important;

  border-color: #27354f !important;

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-profile-page .member-logout-button {

  background: #2d171c !important;

  color: #fca5a5 !important;

  border: 1px solid #7f1d1d !important;

}



body.theme-dark .app.member-app .member-profile-page .member-logout-button:hover {

  background: #4c1d24 !important;

}



body.theme-dark .member-profile-overview-copy p {

  color: #94a3b8 !important;

}



body.theme-dark .member-profile-overview-status.active {

  background: rgba(16, 185, 129, 0.15) !important;

  color: #34d399 !important;

}



body.theme-dark .member-profile-overview-status.inactive {

  background: rgba(239, 68, 68, 0.15) !important;

  color: #f87171 !important;

}



/* Ensure member-profile-back has absolutely no background block and clear text colors */

.app button.member-profile-back,

button.member-profile-back,

.member-profile-back {

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  padding: 0 !important;

  color: #2563eb !important;

  text-decoration: none !important;

}



.app button.member-profile-back:hover,

button.member-profile-back:hover,

.member-profile-back:hover {

  background: transparent !important;

  color: #1d4ed8 !important;

  text-decoration: underline !important;

}



body.theme-dark .app button.member-profile-back,

body.theme-dark button.member-profile-back,

body.theme-dark .member-profile-back {

  background: transparent !important;

  color: #60a5fa !important;

}



body.theme-dark .app button.member-profile-back:hover,

body.theme-dark button.member-profile-back:hover,

body.theme-dark .member-profile-back:hover {

  background: transparent !important;

  color: #93c5fd !important;

  text-decoration: underline !important;

}



/* Ensure member-profile-edit-inline and file links are solid buttons with white text for maximum contrast */

.app button.member-profile-edit-inline,

button.member-profile-edit-inline,

.member-profile-edit-inline,

.app button.member-profile-file-link,

button.member-profile-file-link,

.member-profile-file-link {

  background: #0b4f9c !important;

  color: #ffffff !important;

  border: 1px solid #0b4f9c !important;

  box-shadow: none !important;

  border-radius: 12px !important;

  padding: 10px 14px !important;

  font-weight: 800 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  cursor: pointer !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.app button.member-profile-edit-inline:hover,

button.member-profile-edit-inline:hover,

.member-profile-edit-inline:hover,

.app button.member-profile-file-link:hover,

button.member-profile-file-link:hover,

.member-profile-file-link:hover {

  background: #082b57 !important;

  border-color: #082b57 !important;

  color: #ffffff !important;

}



/* Dark mode overrides for these solid buttons */

body.theme-dark .app button.member-profile-edit-inline,

body.theme-dark button.member-profile-edit-inline,

body.theme-dark .member-profile-edit-inline,

body.theme-dark .app button.member-profile-file-link,

body.theme-dark button.member-profile-file-link,

body.theme-dark .member-profile-file-link {

  background: #2563eb !important;

  color: #ffffff !important;

  border: 1px solid #2563eb !important;

}



body.theme-dark .app button.member-profile-edit-inline:hover,

body.theme-dark button.member-profile-edit-inline:hover,

body.theme-dark .member-profile-edit-inline:hover,

body.theme-dark .app button.member-profile-file-link:hover,

body.theme-dark button.member-profile-file-link:hover,

body.theme-dark .member-profile-file-link:hover {

  background: #1d4ed8 !important;

  border-color: #1d4ed8 !important;

  color: #ffffff !important;

}



/* ===== theme-dark: Member App Dark Mode Overrides (Revisi 126) ===== */

body.theme-dark .app.member-app .content,

body.theme-dark .content {

  background: #090d16 !important;

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-greeting .greeting-subtitle {

  color: #94a3b8 !important;

}



body.theme-dark .app.member-app .member-greeting .greeting-title {

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-notification-btn {

  background: #151d30 !important;

  border: 1px solid #27354f !important;

  color: #cbd5e1 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;

}



body.theme-dark .app.member-app .quick-access-section h3,

body.theme-dark .app.member-app .info-section h3 {

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .quick-card {

  background: #151d30 !important;

  border: 1px solid #27354f !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;

}



body.theme-dark .app.member-app .quick-label {

  color: #cbd5e1 !important;

}



/* Card gradients in dark mode */

body.theme-dark .app.member-app .card-blue {

  background: linear-gradient(135deg, #151d30 0%, #172554 100%) !important;

  border-color: #27354f !important;

  border-left: 4px solid #3b82f6 !important;

}



body.theme-dark .app.member-app .card-green {

  background: linear-gradient(135deg, #151d30 0%, #064e3b 100%) !important;

  border-color: #27354f !important;

  border-left: 4px solid #22c55e !important;

}



body.theme-dark .app.member-app .card-orange {

  background: linear-gradient(135deg, #151d30 0%, #7c2d12 100%) !important;

  border-color: #27354f !important;

  border-left: 4px solid #f97316 !important;

}



body.theme-dark .app.member-app .card-purple {

  background: linear-gradient(135deg, #151d30 0%, #581c87 100%) !important;

  border-color: #27354f !important;

  border-left: 4px solid #a855f7 !important;

}



/* Profile menu cards in dark mode */

body.theme-dark .app.member-app button.member-profile-menu-card {

  background: #151d30 !important;

  border-color: #27354f !important;

}



body.theme-dark .app.member-app button.member-profile-menu-card:hover {

  background: #1e293b !important;

  border-color: #3b82f6 !important;

}



body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-title {

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-note {

  color: #94a3b8 !important;

}



body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-arrow {

  color: #cbd5e1 !important;

}



/* Dynamic color icons inside menu cards */

body.theme-dark .app.member-app .member-profile-tone-blue .member-profile-menu-icon {

  background: rgba(59, 130, 246, 0.15) !important;

  color: #60a5fa !important;

}



body.theme-dark .app.member-app .member-profile-tone-green .member-profile-menu-icon {

  background: rgba(34, 197, 94, 0.15) !important;

  color: #4ade80 !important;

}



body.theme-dark .app.member-app .member-profile-tone-orange .member-profile-menu-icon {

  background: rgba(249, 115, 22, 0.15) !important;

  color: #fb923c !important;

}



body.theme-dark .app.member-app .member-profile-tone-purple .member-profile-menu-icon {

  background: rgba(168, 85, 247, 0.15) !important;

  color: #c084fc !important;

}



/* Notification panel overrides for dark mode */

body.theme-dark .notification-panel {

  background: #151d30 !important;

  border: 1px solid #27354f !important;

  color: #f8fafc !important;

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;

}



body.theme-dark .notification-item {

  border-bottom: 1px solid #27354f !important;

}



body.theme-dark .notification-item:hover {

  background: #1e293b !important;

}



body.theme-dark .notification-item h4 {

  color: #f8fafc !important;

}



body.theme-dark .notification-item p {

  color: #cbd5e1 !important;

}



body.theme-dark .notification-item small {

  color: #94a3b8 !important;

}



body.theme-dark .notification-panel-header {

  border-bottom: 1px solid #27354f !important;

}



body.theme-dark .notification-panel-header h3 {

  color: #f8fafc !important;

}



/* ===== theme-classic & theme-emerald: Light Themes Contrast Fixes (Revisi 127) ===== */

body.theme-classic .app.member-app .content,

body.theme-emerald .app.member-app .content {

  background: #f8fafc !important; /* Pure clean background, removes low-contrast blue gradient */

  color: #0f172a !important;

}



body.theme-classic button.member-profile-back,

body.theme-classic .member-profile-back,

body.theme-emerald button.member-profile-back,

body.theme-emerald .member-profile-back {

  color: #0b4f9c !important; /* Deep dark blue for high readability on white/grey */

  background: transparent !important;

  font-weight: 800 !important;

}



body.theme-classic button.member-profile-back:hover,

body.theme-classic .member-profile-back:hover,

body.theme-emerald button.member-profile-back:hover,

body.theme-emerald .member-profile-back:hover {

  color: #082b57 !important;

  text-decoration: underline !important;

  background: transparent !important;

}



body.theme-classic button.member-profile-edit-inline,

body.theme-classic .member-profile-edit-inline,

body.theme-classic button.member-profile-file-link,

body.theme-classic .member-profile-file-link,

body.theme-emerald button.member-profile-edit-inline,

body.theme-emerald .member-profile-edit-inline,

body.theme-emerald button.member-profile-file-link,

body.theme-emerald .member-profile-file-link {

  background: #0b4f9c !important; /* Crisp solid deep blue */

  color: #ffffff !important;

  border: 1px solid #0b4f9c !important;

}



body.theme-classic button.member-profile-edit-inline:hover,

body.theme-classic .member-profile-edit-inline:hover,

body.theme-classic button.member-profile-file-link:hover,

body.theme-classic .member-profile-file-link:hover,

body.theme-emerald button.member-profile-edit-inline:hover,

body.theme-emerald .member-profile-edit-inline:hover,

body.theme-emerald button.member-profile-file-link:hover,

body.theme-emerald .member-profile-file-link:hover {

  background: #082b57 !important;

  border-color: #082b57 !important;

  color: #ffffff !important;

}



/* ===== theme-dark: Dark Theme High-Contrast Overrides ===== */

body.theme-dark .app.member-app .content {

  background: #090d16 !important;

  color: #f8fafc !important;

}



body.theme-dark button.member-profile-back,

body.theme-dark .member-profile-back {

  color: #60a5fa !important; /* Sky blue on dark background */

  background: transparent !important;

  font-weight: 800 !important;

}



body.theme-dark button.member-profile-back:hover,

body.theme-dark .member-profile-back:hover {

  color: #93c5fd !important;

  text-decoration: underline !important;

  background: transparent !important;

}



body.theme-dark button.member-profile-edit-inline,

body.theme-dark .member-profile-edit-inline,

body.theme-dark button.member-profile-file-link,

body.theme-dark .member-profile-file-link {

  background: #2563eb !important; /* Brighter blue for dark theme */

  color: #ffffff !important;

  border: 1px solid #2563eb !important;

}



body.theme-dark button.member-profile-edit-inline:hover,

body.theme-dark .member-profile-edit-inline:hover,

body.theme-dark button.member-profile-file-link:hover,

body.theme-dark .member-profile-file-link:hover {

  background: #1d4ed8 !important;

  border-color: #1d4ed8 !important;

  color: #ffffff !important;

}



/* Ensure Member App Quick Access buttons are clean, transparent, and borderless across all themes */

.app.member-app .member-home-quick-access button.member-action-card,

.app.member-app .quick-card.member-action-card {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

}



/* Light themes: classic (mode biru) & emerald (mode hijau) label text color */

body.theme-classic .app.member-app .member-home-quick-access button.member-action-card .quick-label,

body.theme-emerald .app.member-app .member-home-quick-access button.member-action-card .quick-label,

body.theme-classic .app.member-app .quick-card.member-action-card .quick-label,

body.theme-emerald .app.member-app .quick-card.member-action-card .quick-label {

  color: #071a37 !important; /* Deep navy text for maximum contrast on light background */

  font-weight: 800 !important;

  font-size: 11px !important;

  margin-top: 6px !important;

  min-height: unset !important;

}



/* Dark theme: label text color */

body.theme-dark .app.member-app .member-home-quick-access button.member-action-card .quick-label,

body.theme-dark .app.member-app .quick-card.member-action-card .quick-label {

  color: #f8fafc !important; /* Pure white text for maximum contrast on dark background */

  font-weight: 800 !important;

  font-size: 11px !important;

  margin-top: 6px !important;

  min-height: unset !important;

}





/* ===== Login Form Compact Overrides to Prevent Scrolling & Overflow ===== */

.login-page {

  overflow: hidden !important;

  overflow-y: hidden !important;

}

.login-card {

  padding: 16px 20px 12px !important;

  border-radius: 20px !important;

}

@media (min-width: 701px) {

  .login-card {

    padding: 18px 24px 14px !important;

  }

}

.login-logo-container {

  margin-bottom: 6px !important;

}

.login-logo-container img {

  height: 48px !important;

}

.login-card h1 {

  font-size: 20px !important;

  margin-bottom: 2px !important;

}

.login-card p {

  margin-bottom: 10px !important;

}

.login-card input {

  padding: 9px 12px !important;

  margin: 4px 0 !important;

}

.login-card button {

  padding: 9px 12px !important;

  margin: 4px 0 !important;

  height: 38px !important;

  min-height: unset !important;

}

.login-action-row {

  display: flex !important;

  gap: 8px !important;

  width: 100% !important;

  margin: 4px 0 !important;

}

.login-action-row button {

  flex: 1 !important;

  margin: 0 !important;

  font-size: 11px !important;

  height: 34px !important;

  min-height: unset !important;

  padding: 0 4px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}

.member-login-help {

  font-size: 10px !important;

  line-height: 1.25 !important;

  margin: 4px 0 2px 0 !important;

  opacity: 0.85;

}

.login-card small {

  margin-top: 4px !important;

  font-size: 9.5px !important;

  opacity: 0.7;

}
/* QR Code Size Enhancements for Better Physical Print Readability */
.rev50-qr {
    width: 165px!important;
    height: 195px!important;
}
.rev50-qr img, .rev50-qr canvas, .rev50-qr svg {
    width: 135px!important;
    height: 135px!important;
}
.rev50-qr em {
    font-size: 12px!important;
}

@media print {
    #ktaPrintRoot .rev50-qr {
        width: 16.5mm!important;
        height: 19.5mm!important;
    }
    #ktaPrintRoot .rev50-qr img {
        width: 13.5mm!important;
        height: 13.5mm!important;
    }
    #ktaPrintRoot .rev50-qr em {
        font-size: 1.2mm!important;
    }
}


/* QR Code Relocation and Resizing to Prevent Overlapping with Secretary Signature */
.rev50-qr {
    top: 185px!important;
    right: 30px!important;
    width: 165px!important;
    height: 195px!important;
}
.rev50-sign-right {
    left: 470px!important;
}

/* Print Layout Relocation and Resizing */
@media print {
    #ktaPrintRoot .rev50-qr {
        top: 18.5mm!important;
        right: 3.0mm!important;
        width: 16.5mm!important;
        height: 19.5mm!important;
    }
    #ktaPrintRoot .rev50-sign-right {
        left: 46.5mm!important;
    }
}


/* Synchronize KTA Header Text Sizes on Front and Back Cards */
.rev50-title h1, .rev50-back-title h1 {
    font-size: 27.2px!important;
    line-height: 1.02!important;
}
.rev50-title p, .rev50-back-title p {
    font-size: 16px!important;
    line-height: 1.15!important;
}
.rev50-title strong, .rev50-back-title strong {
    font-size: 13.5px!important;
    line-height: 1.08!important;
    font-weight: 950!important;
}

@media print {
    #ktaPrintRoot .rev50-title h1, 
    #ktaPrintRoot .rev50-back-title h1 {
        font-size: 5.6mm!important;
    }
    #ktaPrintRoot .rev50-title p, 
    #ktaPrintRoot .rev50-back-title p {
        font-size: 3.3mm!important;
    }
    #ktaPrintRoot .rev50-title strong, 
    #ktaPrintRoot .rev50-back-title strong {
        font-size: 2.8mm!important;
        font-weight: 950!important;
    }
}


.sidebar-selectors { display: none !important; }
/* ===== KTA Visibility Toggle Slide/Scale Animation ===== */
#ktaFlipCardWrapper.kta-hidden-active {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: scaleY(0) scale(0.9) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}
/* ===== Scrollable Modal Body Style for Detailed Profil Modal ===== */
.modal-body-scroll::-webkit-scrollbar {
  width: 6px;
}
.modal-body-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body-scroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e0;
  border-radius: 99px;
}
.modal-body-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 transparent;
}