/* Library layer — rules copied unchanged from the individuals-portal concept (css/concept.css),
   which measured them from the live Figma library: Service Platform Menu 24239:132554 ·
   Page Header 20277:30736 · List container 5613:101187 · Status Tag · Buttons · Pagination. */

/* ===== app frame: content | menu(230) — RTL so menu falls on the right ===== */
.app{ display:flex; flex-direction:row; min-height:100vh; background:var(--background-neutral-50); }
.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.menu{ order:-1; width:230px; flex:none; background:var(--background-white); border-inline-start:1px solid var(--border-neutral-tertiary);
  padding:24px 12px; display:flex; flex-direction:column; gap:12px; min-height:100vh; position:sticky; top:0; align-self:flex-start; max-height:100vh; overflow-y:auto; }
.m-brand{ display:flex; align-items:center; gap:12px; padding:0 8px; }
.m-brand-tile{ width:35px; height:35px; border-radius:8px; background:var(--background-neutral-100); border:1px solid var(--border-neutral-secondary); display:flex; align-items:center; justify-content:center; }
.m-brand-tile img{ width:18px; height:18px; }
.m-brand-title{ font:700 20px/30px var(--font-family-text); color:var(--text-display); }
.m-rule{ height:1px; background:var(--background-neutral-100); margin:0 4px; }
.m-body{ display:flex; flex-direction:column; gap:12px; flex:1; }
.m-section-head{ padding:8px 16px; font:500 12px/18px var(--font-family-text); color:var(--text-secondary); }
.m-items{ display:flex; flex-direction:column; gap:2px; }
.m-item{ display:flex; align-items:center; gap:8px; width:100%; height:36px; padding:8px 12px; border:none; background:transparent;
  border-radius:4px; cursor:pointer; font:400 14px/20px var(--font-family-text); color:var(--text-default); text-align:start; }
.m-item .m-icon{ width:16px; height:16px; flex:none; }
.m-item .m-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-item:hover{ background:var(--background-neutral-100); }
.m-item.is-active{ background:var(--background-neutral-50); color:var(--text-primary); font-weight:600; }
.m-item.is-active .m-icon{ filter: invert(38%) sepia(74%) saturate(430%) hue-rotate(100deg) brightness(92%); }
.m-item.is-disabled{ color:var(--text-default-disabled); cursor:default; }
.m-count{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--background-neutral-100); color:var(--text-primary-paragraph);
  font:600 11px/20px var(--font-family-text); text-align:center; }
.m-userchip{ display:flex; align-items:center; gap:10px; padding:10px 8px; background:var(--background-neutral-50); border:1px solid var(--border-neutral-secondary); border-radius:8px; }
.m-avatar{ width:34px; height:34px; border-radius:50%; background:var(--background-primary); color:var(--text-oncolor-primary); display:flex; align-items:center; justify-content:center; font:600 12px/1 var(--font-family-text); flex:none; }
.m-user-meta{ display:flex; flex-direction:column; min-width:0; }
.ph{ display:flex; align-items:center; gap:16px; background:var(--background-white); padding:24px 24px 20px; border-bottom:1px solid var(--border-neutral-tertiary); }
.ph-title{ font:700 24px/32px var(--font-family-text); color:var(--text-display); }
.lib-btn{ height:40px; padding:0 16px; border-radius:4px; cursor:pointer; font:500 14px/20px var(--font-family-text); }
.lib-btn--primary{ background:var(--button-bg-black-default); border:1px solid var(--button-bg-black-default); color:var(--text-oncolor-primary); }
.lib-btn--secondary{ background:var(--background-white); border:1px solid var(--border-neutral-primary); color:var(--text-default); }
.lib-btn--tertiary{ background:var(--background-neutral-100); border:1px solid var(--border-neutral-tertiary); color:var(--text-default); }
.lib-btn--sm{ height:32px; padding:0 12px; }
.lib-btn:hover{ filter:brightness(1.06); }
.lib-kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1240px){ .lib-kpi-row{ grid-template-columns:repeat(2,1fr); } }
.lib-kpi{ position:relative; overflow:hidden; background:var(--background-white); border-radius:12px; padding:24px; height:164px;
  display:flex; flex-direction:column; gap:16px; }
.lib-kpi-accent{ position:absolute; top:-8px; left:-8px; width:42px; height:42px; border-radius:50%; opacity:.9; }
.lib-kpi-accent::after{ content:''; position:absolute; inset:-60px -60px auto auto; }
.lib-kpi-title{ font:600 16px/22px var(--font-family-text); color:var(--text-primary-paragraph); }
.lib-kpi-value{ font:700 30px/38px var(--font-family-text); color:var(--text-display); }
.lib-kpi-sub{ font:500 12px/18px var(--font-family-text); color:#687588; }
.lib-list{ background:var(--background-white); border-radius:8px; padding:20px; display:flex; flex-direction:column; gap:24px; }
.lib-list-head{ display:flex; align-items:center; gap:12px; }
.lib-list-title{ font:700 20px/30px var(--font-family-text); color:var(--text-display); }
.lib-filter-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lib-dd{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:40px; padding:0 12px;
  min-width:200px; background:var(--background-white); border:1px solid var(--border-neutral-primary); border-radius:4px; }
.lib-dd--wide{ min-width:227px; }
.lib-dd-chev{ color:var(--text-secondary); }
.lib-seg{ display:flex; border:1px solid var(--border-neutral-primary); border-radius:4px; overflow:hidden; }
.lib-seg-item{ height:40px; padding:0 16px; border:none; background:var(--background-white); cursor:pointer;
  font:500 14px/20px var(--font-family-text); color:var(--text-secondary); border-inline-start:1px solid var(--border-neutral-primary); }
.lib-seg-item:first-child{ border-inline-start:none; }
.lib-seg-item.is-on{ background:var(--background-neutral-50); color:var(--text-primary); font-weight:600; box-shadow:inset 0 -2px 0 #1b8354; }
.lib-table{ display:flex; flex-direction:column; }
.lib-tr{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:center; gap:8px; padding:0 16px; min-height:64px; background:var(--background-white); border-top:1px solid var(--border-neutral-tertiary); }
.lib-tr--head{ min-height:48px; border-top:none; background:var(--background-white); }
.lib-th{ display:flex; align-items:center; gap:4px; font:500 14px/20px var(--font-family-text); color:var(--text-secondary); white-space:nowrap; overflow:hidden; }
.lib-sort{ color:var(--text-default-disabled); font-size:11px; }
.lib-td{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-default); }
.lib-tr--click{ cursor:pointer; }
.lib-tr--click:hover{ background:var(--background-neutral-50); }
.lib-tag{ display:inline-flex; align-items:center; gap:8px; height:24px; padding:0 8px; border-radius:9999px;
  font:500 14px/20px var(--font-family-text); white-space:nowrap; width:fit-content; }
.lib-tag-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.lib-pg{ display:flex; align-items:center; gap:8px; direction:ltr; }
.lib-pg-item{ position:relative; min-width:24px; height:24px; padding:0 4px; border:none; border-radius:4px; background:transparent;
  font:400 14px/20px var(--font-family-text); color:var(--text-default); cursor:pointer; }
.lib-pg-item.is-on{ background:var(--background-neutral-50); }
.lib-pg-sel{ position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); width:16px; height:3px; border-radius:9999px; background:var(--background-primary); }
.m-item .m-icon{ display:inline-block; background-color:currentColor; }
.m-brand-tile-img{ width:35px; height:35px; }
.m-count--red{ background:#d92d20; color:var(--text-oncolor-primary); }
.m-gear{ color:var(--text-secondary); font-size:16px; }
.m-body{ min-height:0; }
.m-trial{ margin-top:8px; padding:10px 12px; border-radius:8px; background:var(--background-primary-25); border:1px solid var(--border-primary); display:flex; flex-direction:column; gap:6px; cursor:pointer; }
.m-trial-bar{ height:4px; border-radius:9999px; background:var(--background-neutral-200); overflow:hidden; }
.m-trial-fill{ display:block; height:100%; border-radius:9999px; background:var(--background-primary); }