/* PWX Users — frontend My Account-styling
 * Huisstijl Printworx:
 *   Headers : "Space Grotesk", Semi Bold (600)
 *   Body    : "Atkinson Hyperlegible", Medium (500)
 *   Primair : #b3c731
 *
 * Beide fonts worden door Divi global geladen via de Customizer.
 */

/* Country-flag-emoji polyfill — Windows toont normaal geen vlag-emoji's omdat
 * Segoe UI Emoji geen flag-glyphs heeft. Deze webfont laadt alleen de flag-
 * emoji unicode-range zodat 🇧🇪 / 🇳🇱 / etc als vlaggen renderen op alle OS'en.
 * Bron: https://github.com/talkjs/country-flag-emoji-polyfill (~25KB)
 */
@font-face {
    font-family: 'Twemoji Country Flags';
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
    src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2') format('woff2');
}

.pwx-country-select,
.pwx-country-select option {
    font-family: 'Twemoji Country Flags', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.pwx-account-section {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 10px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
}

.pwx-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid #e2e4e7;
}

.pwx-section-header h2 {
    margin: 0;
    font-size: 22px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    color: #1d2327;
}

.pwx-role-pill {
    display: inline-block;
    padding: 4px 10px;
    background: #f0f6fc;
    color: #1d4e89;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.pwx-help {
    font-size: 13px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* Form-grid */
.pwx-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 16px;
}

.pwx-form-grid .pwx-span-2 {
    grid-column: 1 / -1;
}

.pwx-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pwx-form-grid label > span {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}

.pwx-form-grid input[type=text],
.pwx-form-grid input[type=email],
.pwx-form-grid input[type=tel],
.pwx-form-grid input[type=url],
.pwx-form-grid input[type=password],
.pwx-form-grid select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    background: #fff;
    color: #1d2327;
    transition: border-color .15s, box-shadow .15s;
}

.pwx-form-grid input:focus,
.pwx-form-grid select:focus {
    outline: none;
    border-color: #b3c731;
    box-shadow: 0 0 0 3px rgba(179,199,49,.2);
}

.pwx-form-grid input[type=checkbox] {
    margin-right: 6px;
    vertical-align: middle;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    accent-color: #b3c731;
}

/* Checkbox-label override: standaard zijn label-elementen flex-column,
   maar de checkbox-toggle moet inline (checkbox + tekst naast elkaar). */
.pwx-form-grid label.pwx-default-toggle {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 12px 14px;
    background: #f6f7f7;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    margin-top: 8px;
    user-select: none;
}

.pwx-form-grid label.pwx-default-toggle:hover {
    background: #eef2e9;
    border-color: #b3c731;
}

.pwx-form-grid label.pwx-default-toggle .pwx-default-label-text {
    flex: 1;
    font-size: 14px !important;
    font-weight: 600;
    color: #1d2327 !important;
}

@media (max-width: 600px) {
    .pwx-form-grid {
        grid-template-columns: 1fr;
    }
    .pwx-form-grid .pwx-span-2 {
        grid-column: 1 / -1;
    }
    .pwx-account-section {
        padding: 20px;
    }
}

.pwx-form-actions {
    margin: 16px 0 0;
}

/* Buttons */
.pwx-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: background .15s;
}

.pwx-btn-primary {
    background: #b3c731;
    color: #fff;
}

.pwx-btn-primary:hover { background: #8ea226; color: #fff; }

.pwx-btn-secondary {
    background: #f6f7f7;
    color: #1d2327;
    border: 1px solid #c3c4c7;
}

.pwx-btn-secondary:hover { background: #e8e9eb; }

.pwx-btn:disabled,
.pwx-btn-primary:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.pwx-btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: #2271b1;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    margin-right: 12px;
}

.pwx-btn-link:hover { color: #135e96; }

.pwx-remove-member,
.pwx-delete-address {
    color: #b32d2e;
}
.pwx-remove-member:hover,
.pwx-delete-address:hover {
    color: #8e1f1f;
}

/* Icon-knop variant (vuilbakje). Klikken op het SVG moet doortikken naar
   de button zelf — anders mist de delegated-event-handler de class. */
.pwx-btn-icon {
    background: none;
    border: 0;
    padding: 4px;
    margin: 0;
    color: #b32d2e;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    line-height: 0;
}
.pwx-btn-icon:hover { background: #fdecec; color: #8e1f1f; }
.pwx-btn-icon svg { pointer-events: none; display: block; }

/* Read-only blok */
.pwx-readonly {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 14px;
}

.pwx-readonly dt { font-weight: 600; color: #50575e; }
.pwx-readonly dd { margin: 0; color: #1d2327; }

/* Tabel */
.pwx-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.pwx-table th, .pwx-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e4e7;
    font-size: 14px;
}

.pwx-table th {
    background: #f6f7f7;
    font-weight: 600;
    color: #50575e;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pwx-owner-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #ffd966;
    color: #5c4400;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Leden-tabel (5 vaste kolommen): voorkom dat namen onnodig wrappen, geef
   ROL/STATUS/Actions genoeg breedte zodat headers en knoppen niet halverwege
   een woord breken. Selector sluit .pwx-perm-matrix uitdrukkelijk uit, anders
   lekken deze vaste % naar de matrix waar de kolom-telling variabel is. */
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) {
    table-layout: fixed;
    width: 100%;
}
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) th,
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td {
    padding: 10px 8px;
}
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) th:nth-child(1),
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td:nth-child(1) { width: 26%; }
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) th:nth-child(2),
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td:nth-child(2) { width: 30%; }
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) th:nth-child(3),
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td:nth-child(3) { width: 23%; }
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) th:nth-child(4),
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td:nth-child(4) { width: 13%; white-space: nowrap; }
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) th:nth-child(5),
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td:nth-child(5) { width: 8%; text-align: right; white-space: nowrap; }
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td:nth-child(1) { line-height: 1.45; }
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td:nth-child(1) .pwx-owner-badge {
    display: inline-block;
    margin-left: 0;
    margin-top: 4px;
    vertical-align: baseline;
}
.pwx-leden-page .pwx-table:not(.pwx-perm-matrix) td:nth-child(2) { overflow-wrap: anywhere; }
.pwx-leden-page .pwx-table .pwx-member-role { width: 100%; max-width: 100%; }

/* Permissie-matrix: aantal kolommen is variabel (= aantal extra factuuradressen).
   Wrap in scrolling container zodat bij veel adressen horizontaal gescrold kan
   worden ipv kolommen tot 15 px micromaken. Min-width per kolom houdt labels
   leesbaar; eerste kolom (medewerker) is sticky zodat namen zichtbaar blijven
   tijdens horizontaal scrollen. */
.pwx-perm-matrix-scroll {
    overflow-x: auto;
    margin-bottom: 24px;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
}
.pwx-perm-matrix {
    table-layout: auto;
    width: 100%;
    min-width: 100%;
    margin-bottom: 0;
}
.pwx-perm-matrix th,
.pwx-perm-matrix td {
    padding: 10px 12px;
    vertical-align: middle;
}
.pwx-perm-matrix th:first-child,
.pwx-perm-matrix td:first-child {
    min-width: 140px;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 1px 0 0 #e2e4e7;
}
.pwx-perm-matrix thead th:first-child { background: #f6f7f7; }
.pwx-perm-matrix th:not(:first-child) {
    min-width: 110px;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}
.pwx-perm-matrix .pwx-perm-cell {
    text-align: center;
    min-width: 110px;
}
.pwx-perm-matrix .pwx-perm-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.pwx-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.pwx-status-active  { background: #e6f5e9; color: #1e7e34; }
.pwx-status-pending { background: #fff8e0; color: #856404; }
.pwx-status-revoked { background: #f5f5f5; color: #6c757d; }

.pwx-table .pwx-member-role {
    padding: 6px 10px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 13px;
}

/* Tabs */
.pwx-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #c3c4c7;
    margin: 0 0 20px;
}

.pwx-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 18px;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 500;
    color: #50575e;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.pwx-tab:hover { color: #1d2327; }

.pwx-tab.pwx-tab-active {
    color: #1d2327;
    border-bottom-color: #b3c731;
    font-weight: 600;
}

.pwx-tab-pane[hidden] { display: none; }

/* Address cards */
.pwx-address-list {
    list-style: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.pwx-address-list li,
.pwx-address-card {
    list-style: none !important;
}

.pwx-address-list li::before,
.pwx-address-card::before {
    content: none !important;
    display: none !important;
}

.pwx-address-card {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    padding: 16px;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
}

.pwx-address-card.pwx-address-default {
    border-color: #b3c731;
    box-shadow: 0 0 0 1px #b3c731;
}

.pwx-address-label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #1d2327;
}

.pwx-default-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #b3c731;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pwx-address-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e4e7;
}

.pwx-address-sync {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}
.pwx-address-sync-ok {
    background: #e6f5e9;
    color: #1e7e34;
    font-weight: 600;
}
.pwx-address-sync-pending {
    background: #fff8e0;
    color: #856404;
}

.pwx-empty {
    padding: 24px;
    text-align: center;
    color: #999;
    font-style: italic;
    background: #f9f9f9;
    border-radius: 6px;
}

/* Form-modal voor add/edit address */
.pwx-address-form {
    background: #f9f9f9;
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    padding: 20px;
    margin: 16px 0;
}

/* Flash messages */
.pwx-flash {
    padding: 12px 16px;
    border-radius: 6px;
    margin: 0 0 16px;
    font-size: 14px;
    border-left: 4px solid;
}
.pwx-flash.pwx-flash-success { background: #e6f5e9; color: #155724; border-left-color: #28a745; }
.pwx-flash.pwx-flash-warning { background: #fff8e0; color: #856404; border-left-color: #ffc107; white-space: pre-wrap; }
.pwx-flash.pwx-flash-error   { background: #f8d7da; color: #721c24; border-left-color: #dc3545; }

.pwx-account-notice {
    background: #f0f6fc;
    border-left: 4px solid #2271b1;
    padding: 16px;
    margin: 16px 0;
    border-radius: 4px;
}

/* Sync-status blok */
.pwx-sync-status {
    background: #f0f6fc;
    border-left: 4px solid #2271b1;
    padding: 10px 14px;
    margin: 0 0 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.pwx-sync-status-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1d4e89;
}

.pwx-sync-icon {
    color: #2271b1;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.pwx-btn-small {
    padding: 6px 14px !important;
    font-size: 12px !important;
}

@media (max-width: 600px) {
    .pwx-sync-status {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Bedrijf-switcher */
.pwx-bedrijf-switcher {
    background: #f6f7f7;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.pwx-bedrijf-switcher label {
    font-weight: 600;
    color: #1d2327;
    margin: 0;
    white-space: nowrap;
}

.pwx-bedrijf-switcher select {
    flex: 1;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    background: #fff;
    color: #1d2327;
}

/* Eigen bedrijf aanmaken sectie */
.pwx-create-bedrijf-box {
    background: #fffbf0;
    border-color: #f0d979;
}

.pwx-create-bedrijf-box .pwx-section-header {
    border-bottom-color: #f0d979;
}

.pwx-create-bedrijf-box .pwx-section-header h2 {
    font-size: 18px;
}

.pwx-section-divider {
    border-top: 1px solid #e2e4e7;
    padding-top: 16px !important;
    margin-top: 8px !important;
}

.pwx-subheading {
    font-size: 16px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    color: #1d2327;
    margin: 24px 0 12px;
    padding-top: 16px;
    border-top: 1px solid #e2e4e7;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pwx-subheading:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/* Sector-selector — checkbox-grid in chip-stijl */

.pwx-sector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
}

.pwx-sector-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid #e2e4e7;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    font-size: 14px;
}

.pwx-sector-chip:hover {
    border-color: #b3c731;
    background: #fafbf4;
}

.pwx-sector-chip input[type="checkbox"] {
    margin: 0 8px 0 0;
    accent-color: #b3c731;
}

.pwx-sector-chip.is-checked {
    background: #b3c731;
    border-color: #b3c731;
    color: #fff;
}

.pwx-sector-chip.is-checked .pwx-sector-chip-label {
    color: #fff;
    font-weight: 600;
}

.pwx-sector-chip input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

/* Sector-badge in readonly views */

.pwx-sector-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #f6f8ee;
    color: #6f8019;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 4px 4px 0;
}

/* Account-form: static value display (niet-bewerkbaar veld) — bv. Gebruikersnaam */

.pwx-account-static-value {
    margin: 0;
    padding: 10px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #666;
    font-style: italic;
    user-select: none;
    pointer-events: none;
}

/* Account-form: doorverwijs-melding naar mijn-klantaccount voor bedrijfsgegevens */

.pwx-account-redirect {
    margin: 24px 0 0;
    padding: 12px 16px;
    background: #f6f8ee;
    border-left: 3px solid #b3c731;
    border-radius: 3px;
    font-size: 14px;
    color: #444;
}

.pwx-account-redirect a {
    color: #6f8019;
    font-weight: 600;
}

/* Sync-preview modal (verschijnt bij wijziging van email/tel die ook in factuuradres staat) */

.pwx-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483647 !important; /* max 32-bit signed int — bovenop alles */
    padding: 16px !important;
}

.pwx-modal {
    background: #fff;
    border-radius: 8px;
    max-width: 520px;
    width: 100%;
    padding: 24px 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    max-height: 90vh;
    overflow: auto;
    font-family: 'Atkinson Hyperlegible', -apple-system, sans-serif;
    color: #1a1a1a;
}

.pwx-modal h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #1a1a1a;
    margin: 0 0 12px;
}

.pwx-modal p {
    margin: 8px 0;
    line-height: 1.5;
    color: #444;
}

.pwx-modal ul {
    margin: 8px 0 16px;
    padding-left: 22px;
    list-style: disc;
}

.pwx-modal li {
    padding: 3px 0;
    color: #1a1a1a;
    font-size: 14px;
}

.pwx-modal-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.pwx-modal-actions .pwx-btn {
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.pwx-modal-actions .pwx-btn-primary {
    background: #b3c731;
    color: #fff;
}

.pwx-modal-actions .pwx-btn-primary:hover {
    background: #6f8019;
}

.pwx-modal-actions .pwx-btn-secondary {
    background: #f3f4f6;
    color: #1a1a1a;
}

.pwx-modal-actions .pwx-btn-secondary:hover {
    background: #e5e7eb;
}

.pwx-modal-actions .pwx-btn-link {
    background: transparent;
    color: #6b7280;
    text-decoration: underline;
}

.pwx-section-divider > span {
    font-size: 14px !important;
    color: #1d2327 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* VIES BTW-status */
.pwx-vat-status {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}
.pwx-vat-status.pwx-vat-ok    { color: #1e7e34; font-weight: 600; }
.pwx-vat-status.pwx-vat-error { color: #b32d2e; font-weight: 600; }

/* BTW-veld in address-form is alleen relevant voor factuuradressen.
 * pwx-address-form-wrap data-type bepaalt zichtbaarheid via CSS, zo geen JS-toggle nodig. */
/* BTW-veld enkel op factuuradres. !important nodig omdat .pwx-form-grid label
   (display:flex) een hogere specificiteit heeft dan een losse class-selector. */
.pwx-addr-factuur-only { display: none !important; }
.pwx-address-form-wrap[data-type="factuur"] .pwx-addr-factuur-only { display: flex !important; flex-direction: column; }

/* Factuuradres-permissie matrix */
.pwx-perm-matrix th:not(:first-child),
.pwx-perm-matrix td.pwx-perm-cell {
    text-align: center;
    width: 140px;
}

.pwx-perm-matrix th:not(:first-child) {
    font-size: 11px;
    line-height: 1.3;
    padding: 8px 6px;
}

.pwx-perm-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #b3c731;
}

.pwx-perm-checkbox:disabled {
    opacity: .5;
    cursor: wait;
}

/* Accordion-layout — actief wanneer er >6 factuuradressen zijn (zie
   render_perm_accordion). Per medewerker één expandable rij met counter
   en een verticale checkbox-lijst + zoek-filter binnenin. */
.pwx-perm-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.pwx-perm-acc-row {
    border-bottom: 1px solid #e5e7eb;
}
.pwx-perm-acc-row:last-child { border-bottom: 0; }
.pwx-perm-acc-row[open] { background: #fafbf3; }

.pwx-perm-acc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    user-select: none;
}
.pwx-perm-acc-summary::-webkit-details-marker { display: none; }
.pwx-perm-acc-summary::marker { content: ''; }
.pwx-perm-acc-summary::before {
    content: '▸';
    margin-right: 10px;
    color: #6f8019;
    font-size: 12px;
    transition: transform .15s ease;
    display: inline-block;
    width: 12px;
}
.pwx-perm-acc-row[open] .pwx-perm-acc-summary::before { transform: rotate(90deg); }
.pwx-perm-acc-summary:hover { background: #f6f8ee; }
.pwx-perm-acc-name {
    flex: 1;
    font-weight: 600;
    color: #1f2937;
}
.pwx-perm-acc-count {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.pwx-perm-acc-body {
    padding: 8px 16px 14px 38px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
.pwx-perm-acc-search {
    width: 100%;
    max-width: 320px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 10px;
}
.pwx-perm-acc-search:focus {
    outline: none;
    border-color: #b3c731;
    box-shadow: 0 0 0 2px rgba(179,199,49,0.2);
}
.pwx-perm-acc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 24px;
}
@media (max-width: 600px) { .pwx-perm-acc-list { columns: 1; } }
.pwx-perm-acc-item {
    break-inside: avoid;
    padding: 4px 0;
}
.pwx-perm-acc-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    transition: background .15s ease;
}
.pwx-perm-acc-item label:hover { background: #f6f8ee; }
.pwx-perm-acc-star {
    color: #6f8019;
    font-size: 13px;
}
.pwx-perm-acc-label {
    flex: 1;
    font-size: 13px;
    color: #1f2937;
}
.pwx-perm-acc-def-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6f8019;
    font-weight: 600;
}