binta-table-tools.binta-table-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0;color:#52665b;font:12px/1.3 var(--font-sans,"DM Sans",sans-serif)}
.binta-export-buttons{display:flex;gap:6px}.binta-export-buttons button{border:1px solid #bfd1c5;border-radius:7px;background:#f3f8f4;color:#196b52;padding:6px 11px;min-height:30px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer}.binta-export-buttons button:hover{background:#e3efe7}.binta-export-buttons button:disabled{opacity:.5;cursor:wait}.binta-export-buttons button:focus-visible{outline:2px solid #196b52;outline-offset:2px}.binta-export-error{color:#b42318;flex-basis:100%}.binta-export-error:empty{display:none}
.binta-admin-view #app header:not(.head),.binta-admin-view #app header:not(.head)>div{min-height:56px!important}
.binta-admin-view #app aside+div>div:last-child{padding:12px 18px 0!important}
.binta-admin-view #app .binta-footer{margin-top:12px!important;padding-top:8px!important;padding-bottom:8px!important}
#app main.binta-admin-dense{padding:12px 18px!important;font-size:12px!important}
#app main.binta-admin-dense>*+*{margin-top:8px!important}
#app main.binta-admin-dense h1{font-size:21px!important;line-height:1.2!important;margin:0!important}
#app main.binta-admin-dense h2{font-size:16px!important;line-height:1.25!important}
#app main.binta-admin-dense>nav[aria-label="Manajemen akun"]{gap:5px!important;padding-bottom:4px!important}
#app main.binta-admin-dense .action,#app main.binta-admin-dense nav button{min-height:28px!important;padding:5px 9px!important;line-height:1.25!important;font-size:12px!important;border-radius:6px!important}
#app main.binta-admin-dense .field{height:32px!important;min-height:32px!important;padding:5px 9px!important;font-size:12px!important;line-height:1.3!important}
#app main.binta-admin-dense .table-frame{height:var(--binta-table-height,60vh)!important;max-height:none!important;overflow:auto!important;border:var(--binta-table-border-width,1px) solid var(--binta-table-border,#cbd8cf)!important;border-radius:8px!important;background:white}
#app main.binta-admin-dense .table-frame table{width:100%;font-size:12px!important}
#app main.binta-admin-dense .table-frame th{position:sticky;top:0;z-index:2;background:#edf4ee!important;padding:7px 10px!important;font-size:11px!important;line-height:1.2!important;white-space:nowrap}
#app main.binta-admin-dense .table-frame td{padding:6px 10px!important;font-size:12px!important;line-height:1.25!important;vertical-align:middle!important}
#app main.binta-admin-dense .table-frame td p{margin:1px 0!important;line-height:1.25!important;font-size:11px!important}
#app main.binta-admin-dense .table-frame td button{min-height:26px!important;padding:4px 8px!important;font-size:11px!important}
#app main.binta-admin-dense nav[aria-label="Halaman tabel"]{margin-top:7px!important;gap:8px!important;font-size:11px!important}
#app main.binta-admin-dense nav[aria-label="Halaman tabel"] select{min-height:28px!important;padding:3px 6px!important}
@media(max-width:640px){#app main.binta-admin-dense{padding:10px!important}.binta-export-scope{font-size:11px}#app main.binta-admin-dense .table-frame{min-height:180px}}

.binta-admin-view #app header:not(.head)>div>div{padding-top:6px!important;padding-bottom:6px!important;min-height:54px!important}
.dark #app main.binta-admin-dense .table-frame{background:#1a2e23!important}.dark #app main.binta-admin-dense .table-frame th{background:#213b2a!important;color:#c6dcc8!important}.dark .binta-export-buttons button{background:#213b2a;color:#c6dcc8;border-color:#48634f}
@media(min-width:1280px){.binta-admin-view #app header:not(.head),.binta-admin-view #app header:not(.head)>div{height:56px!important;min-height:56px!important;max-height:56px!important}.binta-admin-view #app header:not(.head)>div>div{height:54px!important;min-height:54px!important}}

/* Admin System / User: toolbar and table placement follows the approved reference. */
#app main:has(>.binta-user-section-title){display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:6px;align-items:start;align-content:start}
#app main:has(>.binta-user-section-title)>h1{grid-column:1/-1;grid-row:1}
#app main:has(>.binta-user-section-title)>nav[aria-label="Manajemen akun"]{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;margin:0!important;padding-top:0!important;padding-bottom:0!important}
#app main:has(>.binta-user-section-title)>.binta-user-section-title{grid-column:1/-1;grid-row:3;background:#fff;color:inherit;padding:8px 12px!important;margin:0!important;font-family:inherit!important;font-size:16px!important;font-weight:600!important;line-height:1.25!important}
#app main:has(>.binta-user-section-title)>div:has(>input[aria-label="Cari data manajemen"]){grid-column:1;grid-row:4;display:flex;flex-wrap:nowrap;gap:10px;align-items:center;margin:0!important;min-width:0}
#app main:has(>.binta-user-section-title)>div:has(>input[aria-label="Cari data manajemen"]) input{flex:1.4 1 0;min-width:140px;max-width:none!important;width:auto!important}
#app main:has(>.binta-user-section-title)>div:has(>input[aria-label="Cari data manajemen"]) select{flex:1 1 0;min-width:130px;max-width:none!important;width:auto!important}
#app main:has(>.binta-user-section-title)>div:has(>input[aria-label="Cari data manajemen"]) button{flex:none;white-space:nowrap}
#app main:has(>.binta-user-section-title)>binta-table-tools{grid-column:2;grid-row:4;justify-content:flex-end;align-self:center;margin:0!important;padding-left:32px}
#app main:has(>.binta-user-section-title)>binta-table-tools .binta-export-scope{display:none}
#app main:has(>.binta-user-section-title)>.table-frame{grid-column:1/-1;grid-row:5;margin-top:8px!important;min-width:0}
#app main:has(>.binta-user-section-title)>nav[aria-label="Halaman tabel"]{grid-column:1/-1;grid-row:6;display:flex;align-items:center;justify-content:space-between;margin:8px 0 0!important}
#app main:has(>.binta-user-section-title)>.binta-footer{grid-column:1/-1;grid-row:7}
#app main:has(>.binta-user-section-title)>p{grid-column:1/-1}
#app main:has(>.binta-user-section-title) .table-frame th:nth-child(1){width:26%}
#app main:has(>.binta-user-section-title) .table-frame th:nth-child(2){width:11%}
#app main:has(>.binta-user-section-title) .table-frame th:nth-child(3){width:21%}
#app main:has(>.binta-user-section-title) .table-frame th:nth-child(4){width:17%}
#app main:has(>.binta-user-section-title) .table-frame th:nth-child(5){width:25%}
.dark #app main:has(>.binta-user-section-title)>.binta-user-section-title{background:#1a2e23;color:#e4eee7}
@media(max-width:900px){#app main:has(>.binta-user-section-title){grid-template-columns:minmax(0,1fr)}#app main:has(>.binta-user-section-title)>binta-table-tools{grid-column:1;grid-row:5;padding-left:0;justify-content:flex-end}#app main:has(>.binta-user-section-title)>.table-frame{grid-row:6}#app main:has(>.binta-user-section-title)>nav[aria-label="Halaman tabel"]{grid-row:7}#app main:has(>.binta-user-section-title)>.binta-footer{grid-row:8}#app main:has(>.binta-user-section-title)>div:has(>input[aria-label="Cari data manajemen"]){flex-wrap:wrap}}

/* User directory: green heading and alternating rows matching the component catalog. */
#app main:has(>.binta-user-section-title) .table-frame thead th{background:#196b52!important;color:#fff!important;border-color:#388269!important}
#app main:has(>.binta-user-section-title) .table-frame tbody tr:nth-child(odd)>td{background:#fff!important}
#app main:has(>.binta-user-section-title) .table-frame tbody tr:nth-child(even)>td{background:#edf5ef!important}
#app main:has(>.binta-user-section-title) .table-frame tbody tr:hover>td{background:#dcece2!important}
.dark #app main:has(>.binta-user-section-title) .table-frame tbody tr:nth-child(odd)>td{background:#182d22!important}
.dark #app main:has(>.binta-user-section-title) .table-frame tbody tr:nth-child(even)>td{background:#223c2c!important}
.dark #app main:has(>.binta-user-section-title) .table-frame tbody tr:hover>td{background:#30513c!important}

.binta-export-buttons button[data-format]{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:34px;padding:3px 5px}.binta-export-buttons button[data-format] img{display:block;width:28px;height:28px;max-width:none;pointer-events:none}

/* Keep the User page controls close to the taller scrolling table. */
#app main:has(>.binta-user-section-title)>nav[aria-label="Halaman tabel"]{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;align-self:start}
#app main:has(>.binta-user-section-title){row-gap:4px}

/* Compact the top of Admin System so the table gains vertical space. */
.binta-admin-view #app aside+div>div:last-child{padding-top:4px!important}
#app main.binta-admin-dense{padding-top:4px!important}
#app main.binta-admin-dense>h1{margin-top:0!important;margin-bottom:0!important}
#app main:has(>.binta-user-section-title)>nav[aria-label="Manajemen akun"]{margin-top:0!important}

/* Admin System omits the footer and uses the bottom space for table rows. */
#app main.binta-admin-dense>.binta-footer{display:none!important}
#app main:has(>.binta-user-section-title){padding-bottom:2px!important}
#app main:has(>.binta-user-section-title)>nav[aria-label="Halaman tabel"]{margin:0!important;padding:0!important}

/* Align the User section title with the main Admin System heading. */
#app main:has(>.binta-user-section-title)>.binta-user-section-title{font-family:inherit!important;font-weight:600!important;padding-left:0!important;text-align:left!important}

/* User identity: equal font sizes, distinct emphasis for name and email. */
#app main:has(>.binta-user-section-title) .table-frame tbody td:first-child>b{font-size:11px!important;font-weight:700!important}
#app main:has(>.binta-user-section-title) .table-frame tbody td:first-child>p{font-size:11px!important;font-weight:400!important}

/* Global export toolbar: icons aligned to the right, without row-count caption. */
binta-table-tools.binta-table-tools{justify-content:flex-end!important}
binta-table-tools .binta-export-buttons{margin-left:auto}
binta-table-tools .binta-export-scope{display:none!important}
binta-table-tools .binta-export-error{text-align:right}