.nav-users{position:relative}.nav-users>span{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:#173f70;color:#fff;font-size:10px;font-weight:900}.nav-users>b{margin-left:auto;padding:3px 6px;border-radius:999px;background:#e8f1fc;color:#24558f;font-size:7px;letter-spacing:.07em}
.account-view{max-width:1580px}.account-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:14px;padding:24px 26px;border-radius:20px;background:linear-gradient(125deg,#102f56,#174a7d 64%,#2470a4);color:#fff;box-shadow:0 18px 40px rgba(18,56,96,.18)}.account-hero .eyebrow{color:#bed9f5}.account-hero h1{margin:7px 0;font-size:30px;letter-spacing:-.025em}.account-hero p{max-width:760px;margin:0;color:#dbeafa;font-size:13px;line-height:1.6}.account-hero .primary{background:#fff;color:#174a7d}
.account-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.account-metrics article{padding:15px 17px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 7px 22px rgba(24,43,72,.045)}.account-metrics span,.account-metrics small{display:block;color:#6d8098;font-size:10px}.account-metrics strong{display:block;margin:5px 0 2px;color:#173f70;font-size:27px}
.account-directory{padding:0;overflow:hidden}.account-toolbar{display:grid;grid-template-columns:minmax(270px,1fr) 170px 170px auto;gap:10px;align-items:end;padding:16px;border-bottom:1px solid #e6edf5;background:#fbfdff}.account-toolbar label{display:grid;gap:6px;color:#60758f;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.account-toolbar input,.account-toolbar select{width:100%;height:42px;border:1px solid #d7e2ef;border-radius:10px;background:#fff;color:#1d3553;padding:0 11px;text-transform:none;letter-spacing:0}.account-search>div{position:relative}.account-search input{padding-right:40px}.account-search button{position:absolute;right:5px;top:5px;width:32px;height:32px;border:0;border-radius:8px;background:#edf3fb;color:#31588f;cursor:pointer;font-size:18px}.account-table-wrap{overflow:auto;min-height:300px}.account-table{min-width:980px}.account-table th,.account-table td{font-size:11px;padding:12px 14px}.account-user strong,.account-user span,.account-unit strong,.account-unit span{display:block}.account-user strong,.account-unit strong{color:#1d3658;font-size:11px}.account-user span,.account-unit span{margin-top:3px;color:#7a8ca2;font-size:9px}.account-role,.account-state{display:inline-flex;padding:5px 8px;border-radius:999px;background:#edf3fb;color:#315b91;font-size:8px;font-weight:900;text-transform:uppercase}.account-role.kecamatan{background:#eaf7f1;color:#237b54}.account-state.inactive{background:#f1f3f6;color:#6e7886}.account-state.reset{background:#fff2df;color:#94631d}.account-actions{display:flex;gap:6px;flex-wrap:wrap}.account-actions button{border:1px solid #d8e3ef;border-radius:9px;background:#fff;color:#285488;padding:7px 9px;cursor:pointer;font-size:9px;font-weight:800}.account-actions button:hover{background:#eef5fd}.account-actions button[data-action="deactivate"]{color:#8b4a42}.account-empty{padding:46px 20px;text-align:center;color:#788a9f;font-size:11px}.account-table-foot{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid #e6edf5;background:#fbfdff;color:#71849b;font-size:9px}
body.account-modal-open{overflow:hidden}.account-modal[hidden]{display:none}.account-modal{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:20px}.account-modal-backdrop{position:absolute;inset:0;background:rgba(9,27,48,.58);backdrop-filter:blur(3px)}.account-modal-shell{position:relative;z-index:1;width:min(680px,96vw);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid rgba(255,255,255,.5);border-radius:20px;background:#fff;box-shadow:0 30px 100px rgba(9,29,53,.34)}.account-modal-shell>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px 17px;border-bottom:1px solid #e5edf5}.account-modal-shell h2{margin:5px 0 6px;color:#17385f;font-size:22px}.account-modal-shell header p{margin:0;color:#687d96;font-size:11px;line-height:1.55}.account-modal-close{flex:none;width:36px;height:36px;border:1px solid #dce6f1;border-radius:10px;background:#f7faff;color:#315783;cursor:pointer;font-size:20px}.account-modal form{padding:20px 24px 24px}.account-modal form>label,.account-form-grid label{display:grid;gap:7px;color:#4e6580;font-size:10px;font-weight:750}.account-modal input,.account-modal select{width:100%;height:45px;border:1px solid #d6e2ef;border-radius:11px;background:#fbfdff;color:#193553;padding:0 11px}.account-modal input:focus-visible,.account-modal select:focus-visible,.account-modal button:focus-visible,.account-view button:focus-visible,.account-view input:focus-visible,.account-view select:focus-visible{outline:3px solid rgba(36,85,166,.32);outline-offset:2px}.account-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.account-form-wide{grid-column:1/-1}.account-modal footer{display:flex;justify-content:flex-end;gap:9px;padding-top:18px}.account-form-error{display:none;margin-top:14px;padding:10px 12px;border:1px solid #efcaca;border-radius:10px;background:#fff1f1;color:#9b403e;font-size:11px}.account-form-error.show{display:block}.account-security-shell{width:min(560px,96vw)}.account-security-shell form{display:grid;gap:13px}.account-show-password{display:flex!important;grid-template-columns:auto 1fr;align-items:center;justify-content:start}.account-show-password input{width:16px;height:16px}.account-password-rule{padding:10px 11px;border:1px solid #dfe8f2;border-radius:10px;background:#f7faff;color:#677d96;font-size:10px;line-height:1.45}.account-confirm-shell{width:min(500px,96vw)}.account-confirm-shell>footer{padding:18px 24px 22px}.account-secret-shell{width:min(560px,96vw);padding-bottom:22px}.account-secret-user{padding:18px 24px 8px;color:#5c718b;font-size:11px}.account-secret-value{display:flex;align-items:center;gap:9px;margin:0 24px;padding:13px 14px;border:1px solid #b8cee7;border-radius:13px;background:#f2f7fd}.account-secret-value code{min-width:0;flex:1;overflow:auto;color:#123d6c;font-size:18px;font-weight:800;letter-spacing:.04em}.account-secret-value button{border:0;border-radius:9px;background:#2455a6;color:#fff;padding:9px 12px;cursor:pointer;font-weight:800}.account-secret-note{margin:12px 24px 0;padding:10px 11px;border-radius:10px;background:#fff5e7;color:#8a5d1b;font-size:10px;line-height:1.5}.account-secret-shell>footer{padding:16px 24px 0}
.account-busy{opacity:.72}.account-busy button:disabled{cursor:not-allowed}.user-popover button+button{margin-top:6px}.user-popover #logoutButton{background:#f8f3f2;color:#814b45}
.account-audit-panel{margin-top:14px}.account-audit-panel .panel-sub{font-size:11px}.account-audit-list{display:grid;gap:8px}.account-audit-row{display:grid;grid-template-columns:150px minmax(180px,1fr) minmax(220px,1.4fr);gap:14px;align-items:center;padding:11px 12px;border:1px solid #e2eaf3;border-radius:11px;background:#fbfdff}.account-audit-row time{color:#6e829a;font-size:9px}.account-audit-row strong{color:#1e3c62;font-size:10px}.account-audit-row span{color:#667b94;font-size:10px}
@media(max-width:980px){.account-metrics{grid-template-columns:repeat(2,1fr)}.account-toolbar{grid-template-columns:1fr 1fr}.account-search{grid-column:1/-1}}
@media(max-width:620px){.account-hero{align-items:flex-start;flex-direction:column;padding:21px}.account-hero h1{font-size:26px}.account-metrics{grid-template-columns:1fr 1fr}.account-toolbar{grid-template-columns:1fr}.account-search{grid-column:auto}.account-table-foot{align-items:flex-start;flex-direction:column}.account-audit-row{grid-template-columns:1fr;gap:5px}.account-modal{padding:8px}.account-modal-shell{width:100%;max-height:calc(100dvh - 16px);border-radius:15px}.account-form-grid{grid-template-columns:1fr}.account-form-wide{grid-column:auto}.account-modal-shell>header,.account-modal form{padding-left:18px;padding-right:18px}.account-secret-value{margin-left:18px;margin-right:18px}.account-secret-value code{font-size:14px}}
/* Accessibility: force near-zero transitions when the operating system requests reduced motion. */
@media(prefers-reduced-motion:reduce){.account-view *,.account-modal *{scroll-behavior:auto;transition-duration:.01ms!important}}
@media(forced-colors:active){.account-modal button:focus-visible,.account-view button:focus-visible,.account-view input:focus-visible,.account-view select:focus-visible{outline:2px solid CanvasText}}
/* v1.5.0 — Master Pengguna: ekspor Excel aman, responsif */
.account-toolbar{grid-template-columns:minmax(220px,1fr) 150px 150px auto auto}
#accountExportExcel{height:42px;min-width:153px;padding:0 14px;white-space:nowrap;border:0;border-radius:10px;background:#204f91;color:#fff;font-size:11px;font-weight:800;cursor:pointer}
#accountExportExcel:hover{background:#173e74}#accountExportExcel:disabled{opacity:.6;cursor:wait}
@media(max-width:1200px){.account-toolbar{grid-template-columns:minmax(210px,1fr) 1fr 1fr}.account-toolbar #accountRefresh,.account-toolbar #accountExportExcel{width:100%}}
@media(max-width:700px){.account-toolbar{grid-template-columns:1fr 1fr}.account-toolbar .account-search{grid-column:1/-1}.account-toolbar label:nth-of-type(3){grid-column:1/-1}}