Partner Master — split-panel shell
:host {
  display: block;
  width: 100%;
  height: 100%;
}
.pm-shell{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:18px;
    height:calc(100vh - 60px);
    padding:18px;
    background:#f4f7fb;
    overflow:hidden;
}
// ── Left panel ────────────────────────────────────────────────────────────────

.pm-list-panel{
    display:flex;
    flex-direction:column;

    background:#ffffff;

    border:1px solid #e6ebf2;

    border-radius:14px;

    overflow:hidden;

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

.pm-list-header{

    padding:22px;

    border-bottom:1px solid #edf2f7;

    background:#fff;

}

.pm-list-header-top{

    display:flex;

    flex-direction:column;

    gap:18px;

}
.pm-list-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.pm-list-title{

    margin:0;

    font-size:26px;

    font-weight:700;

    color:#1e293b;

    line-height:1.3;

    white-space:normal;

    overflow:visible;

}
.pm-btn-new{

    width:100%;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.pm-btn-new:hover{

    background:#1d4ed8;

}


// Search

.pm-search-wrap{

    margin-top:20px;

}

.pm-search{

    width:100%;

    height:44px;

    border:1px solid #dbe2ea;

    border-radius:10px;

    padding:0 14px 0 42px;

    font-size:14px;

    transition:.25s;
}

.pm-search:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

    outline:none;

}

.pm-search::placeholder{

  color:#9ca3af;

}

.pm-search:focus{

  border-color:#2563eb;

}

.pm-search-icon{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

}

// Filter tabs

.pm-filter-tabs{

    display:flex;

    gap:8px;

    margin-top:18px;

    overflow:auto;

    scrollbar-width:none;

}

.pm-filter-tabs::-webkit-scrollbar{

    display:none;

}
.pm-filter-tab{

    padding:9px 18px;

    border:none;

    border-radius:30px;

    background:#f1f5f9;

    color:#475569;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    white-space:nowrap;
}

.pm-filter-tab:hover{

    background:#e2e8f0;

}

.pm-filter-tab--active{

    background:#2563eb;

    color:#fff;

}

// List body

.pm-list-body{

    flex:1;

    overflow:auto;

    padding:16px;

}

.pm-list-loading,
.pm-list-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--gb-color-text-tertiary, #aab4cc);
}

.pm-list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pm-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--gb-color-border, rgba(255, 255, 255, 0.10));
  border-top-color: var(--gb-color-primary, #3d7fff);
  border-radius: 50%;
  animation: pm-spin 0.7s linear infinite;
}

@keyframes pm-spin { to { transform: rotate(360deg); } }

// List items

.pm-list-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px;

    margin-bottom:12px;

    border:1px solid #edf2f7;

    border-radius:12px;

    background:#fff;

    cursor:pointer;

    transition:.25s;
}

.pm-list-item:hover{

    background:#f8fbff;

    border-color:#2563eb;

    transform:translateY(-2px);

    box-shadow:0 6px 16px rgba(37,99,235,.10);

}

.pm-list-item--selected{

    background:#eff6ff;

    border-color:#2563eb;

}

.pm-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#4f8cff);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:15px;
}
.pm-item-info {
  flex: 1;
  min-width: 0;
}

.pm-item-name{

    font-size:15px;

    font-weight:600;

    color:#1f2937;

}

.pm-item-meta{

    font-size:12px;

    color:#6b7280;

}

.pm-item-code { font-weight: 500; }
.pm-item-dot  { opacity: 0.5; }
.pm-item-email { overflow: hidden; text-overflow: ellipsis; }

// Status badges

.pm-badge{

    padding:5px 12px;

    border-radius:999px;

    font-size:11px;

    font-weight:600;

}

// ── Right panel ───────────────────────────────────────────────────────────────

.pm-detail-panel{

    background:#ffffff;

    border:1px solid #e6ebf2;

    border-radius:14px;

    overflow:auto;

    display:flex;

    flex-direction:column;

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

}
// Empty state

.pm-empty-state{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    padding:60px;
}
.pm-empty-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    color:#2563eb;

    margin-bottom:20px;
}

.pm-empty-title{

    font-size:24px;

    font-weight:700;

    color:#1e293b;

    margin-bottom:10px;
}
.pm-empty-hint{

    font-size:15px;

    color:#64748b;

    max-width:420px;
}

.pm-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gb-color-text-secondary, #6b7494);
}

// .pm-empty-hint {
//   font-size: 12px;
// }

// ── RTL ───────────────────────────────────────────────────────────────────────
[dir="rtl"] {
  .pm-shell { grid-template-columns: 1fr 300px; direction: rtl; }
  .pm-list-panel { border-right: none; border-left: 1px solid var(--gb-color-border, rgba(255, 255, 255, 0.08)); }
  .pm-list-item { border-left: none; border-right: 2px solid transparent; &--selected { border-right-color: var(--gb-color-primary, #3d7fff); } }
  .pm-search { padding: 7px 10px 7px 30px; }
  .pm-search-icon { right: auto; left: 10px; }
}




// :host {
//   display: block;
//   height: 100%;
// }

// .pm-shell {
//   display: flex;
//   width: 100%;
//   height: calc(100vh - 60px);
//   overflow: hidden;
//   background: #f5f7fb;
// }

// /* LEFT PANEL */
// .pm-list-panel {
//   width: 360px;
//   min-width: 360px;
//   max-width: 360px;
//   display: flex;
//   flex-direction: column;
//   background: #ffffff;
//   border-right: 1px solid #dcdcdc;
// }

// /* RIGHT PANEL */
// .pm-detail-panel {
//   flex: 1;
//   overflow: auto;
//   background: #fafafa;
//   padding: 20px;
// }

// /* HEADER */
// .pm-list-header {
//   padding: 18px;
//   border-bottom: 1px solid #ececec;
// }

// .pm-list-title-row{
//     display:flex;
//     align-items:flex-start;
//     justify-content:space-between;
//     gap:16px;
// }

// .pm-list-title {
//   font-size: 20px;
//   font-weight: 600;
// }

// .pm-btn-new{
//     display:flex;
//     align-items:center;
//     justify-content:center;
//     gap:8px;

//     min-width:170px;
//     height:42px;

//     padding:0 18px;

//     background:#2563eb;
//     color:#fff;

//     border:none;
//     border-radius:8px;

//     cursor:pointer;

//     white-space:nowrap;

//     flex-shrink:0;
// }

// .pm-btn-new:hover {
//   background: #0d47a1;
// }

// /* SEARCH */
// .pm-search-wrap {
//     position:relative;
//     margin-top:18px;
//     margin-bottom:18px;
// }

// .pm-search {
//   width:100%;
//     box-sizing:border-box;

//     height:44px;

//     padding-left:42px;
//     padding-right:14px;
// }

// .pm-search-icon{

//     position:absolute;

//     left:14px;

//     top:50%;

//     transform:translateY(-50%);

//     color:#9ca3af;

//     pointer-events:none;

// }
// /* FILTERS */
// .pm-filter-tabs {
//   display: flex;
//   gap: 8px;
//   margin-top: 16px;
//   overflow-x: auto;
// }

// .pm-filter-tab{

//     flex:0 0 auto;

//     padding:8px 18px;

//     border:none;

//     border-radius:999px;

//     background:#f3f4f6;

//     color:#374151;

//     font-size:13px;

//     font-weight:500;

//     white-space:nowrap;

//     cursor:pointer;
// }

// .pm-filter-tab--active{
//     background:#2563eb;
//     color:#fff;
// }

// .pm-filter-tab--active {
//   background: #1565c0;
//   color: white;
// }

// /* LIST */
// .pm-list-body {
//   flex: 1;
//   overflow: auto;
// }

// .pm-list-item{

//     display:flex;

//     align-items:center;

//     gap:14px;

//     padding:16px;

//     margin:8px 10px;

//     border-radius:10px;

//     transition:.25s;

// }

// .pm-list-item:hover{

//     background:#f8fafc;

// }

// .pm-list-item--selected{

//     background:#eff6ff;

//     border-left:4px solid #2563eb;

// }
// /* AVATAR */
// .pm-avatar {
//   width: 46px;
//   height: 46px;
//   border-radius: 50%;
//   background: #1565c0;
//   color: white;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   font-weight: bold;
//   margin-right: 12px;
// }

// .pm-item-info {
//   flex: 1;
// }

// .pm-item-name {
//   font-weight: 600;
// }

// .pm-item-meta {
//   color: #777;
//   font-size: 13px;
// }

// .pm-badge {
//   padding: 5px 10px;
//   border-radius: 14px;
//   font-size: 12px;
//   font-weight: 600;
// }

// .pm-badge--active {
//   background: #dff6e3;
//   color: #2e7d32;
// }

// .pm-badge--blocked {
//   background: #fde2e2;
//   color: #c62828;
// }

// .pm-badge--sent {
//   background: #fff5d6;
//   color: #b28704;
// }

// .pm-badge--submitted {
//   background: #dceeff;
//   color: #1565c0;
// }

// .pm-badge--query {
//   background: #f3e8ff;
//   color: #6a1b9a;
// }

// .pm-badge--expired,
// .pm-badge--draft {
//   background: #eeeeee;
//   color: #555;
// }

// /* EMPTY STATE */
// .pm-empty-state {
//   height: 100%;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
//   color: #666;
// }

// .pm-empty-icon {
//   font-size: 60px;
// }

// .pm-empty-title {
//   font-size: 22px;
//   font-weight: 600;
//   margin-top: 15px;
// }

// .pm-empty-hint {
//   margin-top: 10px;
// }
// .pm-list-header{
//     padding:20px;
//     border-bottom:1px solid #e5e7eb;
//     background:#fff;
// }

// .pm-list-title-row{
//     display:flex;
//     justify-content:space-between;
//     align-items:center;
//     margin-bottom:18px;
// }

// .pm-header-info{
//     flex:1;
//     min-width:0;
// }

// .pm-list-title{
//     margin:0;
//     font-size:26px;
//     font-weight:700;
//     color:#1f2937;
//     line-height:1.2;
//     word-break:break-word;
// }

// .pm-partner-count{
//     margin-top:4px;
//     font-size:13px;
//     color:#6b7280;
// }

// .pm-btn-new{
//     flex-shrink:0;

//     display:flex;
//     align-items:center;
//     justify-content:center;
//     gap:8px;

//     height:42px;
//     padding:0 16px;

//     border:none;
//     border-radius:8px;

//     background:#2563eb;
//     color:#fff;

//     font-size:14px;
//     font-weight:600;

//     white-space:nowrap;
// }

// .pm-btn-new:hover{
//     background:#1d4ed8;
// }

// .pm-btn-icon{
//     font-size:18px;
//     font-weight:bold;
// }

// .pm-search-wrap{
//     position:relative;
//     margin-top:18px;
//     margin-bottom:18px;
// }

// .pm-search{
//     width:100%;
//     height:44px;

//     padding-left:42px;
//     padding-right:14px;

//     border:1px solid #d1d5db;
//     border-radius:10px;

//     font-size:14px;
// }

// .pm-search:focus{
//     border-color:#2563eb;
// }

// .pm-search-icon{
//     position:absolute;
//     left:14px;
//     top:50%;
//     transform:translateY(-50%);
//     font-size:16px;
// }

// .pm-filter-tabs{
//     display:flex;
//     gap:10px;
//     overflow-x:auto;
//     padding-bottom:4px;
// }

// .pm-filter-tabs{
//     display:flex;
//     gap:8px;
//     overflow-x:auto;
//     scrollbar-width:none;
//     padding-bottom:4px;
// }

// .pm-filter-tab:hover{
//     background:#e5e7eb;
// }

// .pm-filter-tab--active{
//     background:#2563eb;
//     color:#fff;
// }
// .pm-filter-tabs::-webkit-scrollbar{
//     display:none;
// }