/* Inställningar > Medlemmar (views/installningar-medlemmar.js, components/member-panels.js). Colours from tokens.css only. Under 700 px the rows become cards. */
.me-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-3) 0}
.me-bar input{width:260px;max-width:100%}
.me-alone{margin:var(--s-4) 0;color:var(--ink2)}
.me-table{width:100%;border-collapse:collapse}
.me-table th,.me-table td{height:auto;text-align:left;padding:var(--s-2) var(--s-3) var(--s-2) 0;vertical-align:middle;box-shadow:0 1px 0 var(--edge2)}
.me-table thead th{font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.me-name{font-weight:500}
.me-roles{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-xs)}

.me-inv{color:var(--ink2)}
.me-mail{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-sm);overflow-wrap:anywhere}
.me-off{opacity:.7}
.me-lo{margin-left:var(--s-2)}
.me-act{text-align:right}
.me-act .me-btns{justify-content:flex-end;max-width:240px}
.me-btns,.me-confirm{display:inline-flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.me-confirm{font-size:var(--fs-sm)}
.me-prow td{padding:var(--s-2) 0 var(--s-3)}
.me-panel{margin:var(--s-3) 0;padding:var(--s-4);border-radius:var(--r-md);background:var(--surface2);box-shadow:var(--sh)}
.me-panel select,.me-panel input[type=email]{max-width:360px;width:100%}
.me-ph{margin:0 0 var(--s-2);font-size:var(--fs-base);font-weight:600}
.me-panel .me-btns{margin-top:var(--s-3)}
.me-linkrow{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.me-linkrow input{flex:1 1 280px;min-width:0;font-family:var(--font-mono);font-size:var(--fs-sm)}
@media (max-width:700px){
  .me-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .me-table,.me-table tbody,.me-table tr,.me-table th,.me-table td{display:block}
  .me-row{padding:var(--s-3) 0;box-shadow:0 1px 0 var(--edge2)}
  .me-table th,.me-table td{box-shadow:none;padding:2px 0;text-align:left}
  .me-table td[data-l]:not(.me-name)::before{content:attr(data-l) ": ";color:var(--muted);font-size:var(--fs-xs)}
  .me-act{margin-top:var(--s-2)}
  .me-prow td{padding:0}
  .me-panel{position:fixed;inset:0;z-index:70;margin:0;border-radius:0;padding:var(--s-5) var(--s-4);overflow:auto;background:var(--surface)}
  .me-bar input{width:100%}
}