.sab-ep{background:var(--sab-bg);padding:24px 16px 60px;max-width:1400px;margin:0 auto}

/* ---- Header ---- */
.sab-ep-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sab-ep-title{font-size:32px;font-weight:800;margin:0;letter-spacing:-.01em}
.sab-ep-sub{color:var(--sab-muted);margin:6px 0 0;font-size:14.5px}

.sab-ep-viewtoggle{background:transparent;border:none;gap:10px}
.sab-ep-viewtoggle button{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-weight:600;font-size:13.5px;color:var(--sab-muted);background:#fff;border:1.5px solid var(--sab-border);border-radius:10px}
.sab-ep-viewtoggle button.is-active{background:#fff;color:var(--sab-blue);border-color:var(--sab-blue)}
.sab-ep-viewtoggle button:not(.is-active):hover{color:var(--sab-text);border-color:#c7cede}

/* ---- Toolbar ---- */
.sab-ep-toolbar{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--sab-border);border-radius:14px;padding:12px 14px;margin-bottom:14px;flex-wrap:wrap;box-shadow:var(--sab-shadow)}
.sab-ep-toolbar .sab-search{flex:1 1 260px;min-width:200px;position:relative}
.sab-ep-toolbar .sab-search input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--sab-border);border-radius:10px;background:#f8f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M11 11l4 4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center;font-size:14px}
.sab-ep-toolbar .sab-search input:focus{outline:none;border-color:var(--sab-blue);background-color:#fff}
.sab-ep-toolbar select{width:auto;min-width:150px;border:1px solid var(--sab-border);border-radius:10px;padding:10px 12px;font-size:13.5px;background:#fff;color:var(--sab-text)}
.sab-ep-clear{font-size:13.5px;color:var(--sab-blue);white-space:nowrap;font-weight:600;margin-left:auto}
.sab-ep-toolbar .sab-btn{white-space:nowrap}
.sab-ep-toolbar .sab-btn-light{background:#fff}
.sab-ep-toolbar #sab-ep-search-btn{padding:10px 20px}

/* ---- Results head ---- */
.sab-ep-resultshead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.sab-ep-count{font-size:13.5px;color:var(--sab-muted);margin:0}
.sab-ep-count strong{color:var(--sab-text)}
.sab-sort{font-size:13.5px;color:var(--sab-muted)}
.sab-sort select{border:none;background:transparent;padding:2px 4px;font-size:13.5px;color:var(--sab-text);font-weight:600}
.sab-sort select:focus{outline:none}

/* ---- Body layout ---- */
.sab-ep-body{display:grid;grid-template-columns:256px minmax(0,1fr);gap:28px;align-items:start}

/* ---- Filters sidebar (flush, no card chrome) ---- */
.sab-ep-filters{background:transparent;border:none;padding:0;position:sticky;top:20px;box-shadow:none}
.sab-filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sab-filters-head strong{font-size:16px;font-weight:800}
.sab-filters-head button{background:none;border:none;color:var(--sab-blue);font-size:13px;font-weight:600;cursor:pointer;padding:0}

.sab-filter-group{padding:16px 0;border-bottom:1px solid var(--sab-border)}
.sab-filter-group:last-of-type{border-bottom:none}
.sab-filter-group h5{display:flex;align-items:center;justify-content:space-between;margin:0;font-size:13.5px;font-weight:700;color:var(--sab-text);cursor:default}
.sab-filter-group[data-collapsible="1"] h5{cursor:pointer}
.sab-fg-chevron{font-size:12px;color:var(--sab-muted);transition:transform .15s}
.sab-filter-group.is-collapsed .sab-fg-chevron{transform:rotate(180deg)}
.sab-filter-group.is-collapsed .sab-fg-body{display:none}
.sab-fg-body{margin-top:12px}

.sab-ep-filters select{width:100%;border:1px solid var(--sab-border);border-radius:9px;padding:10px 12px;font-size:13.5px;background:#fff;color:var(--sab-text)}

.sab-ep-roles{display:flex;flex-direction:column;gap:12px;max-height:none}
.sab-ep-roles li{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sab-ep-roles em{display:none}

/* Checkbox-styled radios */
.sab-check{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--sab-text);cursor:pointer}
.sab-ep-roles li:first-child .sab-check{font-weight:700}
.sab-check input[type="radio"]{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:0 0 auto;margin:0;border:1.5px solid #cbd2e0;border-radius:5px;background:#fff;position:relative;cursor:pointer}
.sab-check input[type="radio"]:checked{background:var(--sab-blue);border-color:var(--sab-blue)}
.sab-check input[type="radio"]:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sab-check input[type="radio"]:focus-visible{outline:2px solid var(--sab-blue);outline-offset:2px}

.sab-btn-block{width:100%}
#sab-ep-reset{color:var(--sab-blue);background:#fff;border-color:var(--sab-border);margin-top:6px}
#sab-ep-reset:hover{border-color:var(--sab-blue);background:#f5f8ff}

/* ---- Grid ---- */
.sab-ep-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.is-hidden{display:none}
@media(max-width:1300px){.sab-ep-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.sab-ep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sab-ep-body{grid-template-columns:1fr}.sab-ep-filters{position:static;order:-1}}
@media(max-width:560px){.sab-ep-grid{grid-template-columns:1fr}.sab-ep-head{align-items:flex-start}}

/* ---- Grid card ---- */
.sab-ep-card{background:#fff;border:1px solid var(--sab-border);border-radius:16px;overflow:hidden;box-shadow:var(--sab-shadow);text-align:center;transition:transform .18s,box-shadow .18s}
.sab-ep-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(16,24,40,.1)}
.sab-ep-media{position:relative;height:132px;background:linear-gradient(135deg,#eef2f9,#f7f8fc)}
.sab-ep-media img{width:100%;height:100%;object-fit:cover}
.sab-ep-media-empty{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e7ecf7,#f7f8fc)}

.sab-ep-avatar{position:absolute;left:50%;bottom:-36px;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;border:4px solid #fff;overflow:hidden;background:#eef2f9;box-shadow:0 3px 10px rgba(16,24,40,.14)}
.sab-ep-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sab-ep-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:700;color:#8b93a7;background:#eef2f9;font-size:22px}
.sab-ep-avatar.is-online::after{content:"";position:absolute;right:3px;bottom:3px;width:13px;height:13px;border-radius:50%;background:var(--sab-green);border:2.5px solid #fff}

.sab-ep-body{padding:46px 16px 18px}
.sab-ep-name{font-size:15.5px;margin:0 0 6px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px}
.sab-ep-name a{color:var(--sab-text)}
.sab-ep-name a:hover{color:var(--sab-blue)}
.sab-ep-verified{color:var(--sab-blue);font-size:13px}
.sab-ep-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sab-green)}

.sab-ep-role{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.01em;border-radius:999px;padding:3px 11px;margin-bottom:6px}
.sab-ep-role.is-owner{background:#eaf1ff;color:#2563eb}
.sab-ep-role.is-manager{background:#eafbef;color:#16a34a}
.sab-ep-role.is-staff{background:#f3ecff;color:#7c3aed}
.sab-ep-role.is-supplier{background:#fff4e5;color:#c2660b}
.sab-ep-role.is-other{background:#f1f4fb;color:#475569}

/* Grid role reads as plain colored text, no pill */
.sab-ep-role.sab-ep-role-text{background:none;padding:0;font-size:13px;margin-bottom:6px}

.sab-ep-company{font-size:13.5px;font-weight:600;margin:0 0 4px;color:var(--sab-text)}
.sab-ep-company a{color:var(--sab-text)}
.sab-ep-company a:hover{color:var(--sab-blue)}
.sab-ep-loc{font-size:12.5px;color:var(--sab-muted);margin:0 0 14px;display:flex;gap:6px;align-items:center;justify-content:center}
.sab-ep-loc i{color:#a7b0c2}

.sab-ep-actions{display:flex;gap:8px;justify-content:center}
.sab-ep-icon{width:36px;height:36px;border:1px solid var(--sab-border);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--sab-muted);background:#fff;font-size:13.5px;transition:.15s}
.sab-ep-icon:hover{border-color:var(--sab-blue);color:var(--sab-blue);background:#f5f8ff}
.sab-ep-icon.is-disabled{opacity:.35;pointer-events:none}

/* Grid actions read blue by default, matching the reference design */
.sab-ep-card .sab-ep-icon{border-color:#d3e0ff;color:var(--sab-blue);background:#f7faff}
.sab-ep-card .sab-ep-icon:hover{border-color:var(--sab-blue);background:#eaf1ff}
.sab-ep-card .sab-ep-icon.is-disabled{opacity:.35}

/* ---- List / table view ---- */
.sab-ep-tablewrap{background:#fff;border:1px solid var(--sab-border);border-radius:14px;overflow:auto;box-shadow:var(--sab-shadow)}
.sab-ep-table{width:100%;border-collapse:collapse;min-width:760px}
.sab-ep-table thead th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--sab-muted);padding:16px 20px;border-bottom:1px solid var(--sab-border);white-space:nowrap;background:#fff}
.sab-ep-table tbody td{padding:14px 20px;border-bottom:1px solid var(--sab-border);vertical-align:middle;font-size:13.5px}
.sab-ep-table tbody tr:last-child td{border-bottom:none}
.sab-ep-table tbody tr:hover{background:#fafbff}

.sab-ep-person{display:flex;align-items:center;gap:12px}
.sab-ep-table .sab-ep-thumb-avatar{position:relative;width:40px;height:40px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:#eef2f9;display:block}
.sab-ep-table .sab-ep-thumb-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sab-ep-table .sab-ep-thumb-avatar .sab-ep-avatar-fallback{font-size:14px}
.sab-ep-table .sab-ep-thumb-avatar.is-online::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--sab-green);border:2px solid #fff}

.sab-ep-personlink{display:flex;flex-direction:column;gap:3px;color:var(--sab-text)}
.sab-ep-personlink:hover .sab-ep-name{color:var(--sab-blue)}
.sab-ep-table .sab-ep-name{font-weight:700;font-size:14px;display:inline-flex;gap:8px;align-items:center;margin:0}
.sab-ep-badge{display:inline-block;background:#eaf1ff;color:#2563eb;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}

.sab-ep-role-cell{white-space:nowrap}
.sab-ep-table .sab-ep-role{margin:0}
.sab-ep-table .sab-ep-company a{color:var(--sab-text);font-weight:600}
.sab-ep-table .sab-ep-company a:hover{color:var(--sab-blue)}
.sab-ep-table .sab-ep-loc{justify-content:flex-start;display:flex;align-items:center;gap:6px;color:var(--sab-muted)}
.sab-ep-table .sab-ep-loc i{color:#a7b0c2}
.sab-ep-table .sab-ep-actions{justify-content:flex-start}

/* List actions: neutral by default, last (connect) icon stays accented */
.sab-ep-table .sab-ep-actions .sab-ep-icon:last-child{border-color:#d3e0ff;color:var(--sab-blue);background:#f7faff}
.sab-ep-table .sab-ep-actions .sab-ep-icon:last-child:hover{background:#eaf1ff}

.sab-ep-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.sab-ep-perpage select{width:auto;border:1px solid var(--sab-border);border-radius:8px;padding:7px 10px;font-size:13px}

/* Pagination — square buttons, active filled blue */
.sab-ep-pagination{justify-content:flex-start}
.sab-ep-pagination button{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:9px}

.sab-is-loading{opacity:.55;pointer-events:none;transition:opacity .15s}