/* Accounts page: layout only. Every colour, radius and spacing value comes
   from the console-ui.css token block; no page-local palette. */

.accounts-page{
  display:flex;
  flex-direction:column;
  gap:var(--c-grid-gap);
  min-width:0;
}
.accounts-page .c-page-head{margin-bottom:0}
.accounts-page .accounts-feedback{
  min-height:22px;
  margin:0;
  color:var(--c-muted);
  font-size:var(--c-text-md);
  line-height:1.6;
}
.accounts-page #content{
  display:flex;
  flex-direction:column;
  gap:var(--c-grid-gap);
  min-width:0;
}
.accounts-page #content[hidden]{display:none}
.accounts-page .accounts-card{min-width:0}

/* Member earnings ------------------------------------------------------- */

.accounts-page .accounts-earnings-table{min-width:880px}
.accounts-page .accounts-earnings-identity{
  min-width:200px;
  overflow-wrap:anywhere;
}
.accounts-page .accounts-earnings-name{
  color:var(--c-ink);
  font-weight:650;
  line-height:1.4;
}
.accounts-page .accounts-earnings-number{
  color:var(--c-ink);
  font-size:var(--c-text-lg);
  font-weight:650;
  font-variant-numeric:tabular-nums;
  line-height:1.4;
  white-space:nowrap;
}
.accounts-page .accounts-earnings-available{color:var(--c-online)}
.accounts-page .accounts-delta-danger{color:var(--c-danger)}

/* Member accounts ------------------------------------------------------- */

.accounts-page .accounts-members-table{min-width:900px}
.accounts-page .accounts-break{overflow-wrap:anywhere}
.accounts-page .accounts-member-name{
  color:var(--c-ink);
  font-weight:600;
  overflow-wrap:anywhere;
}
.accounts-page .accounts-share-form{
  display:flex;
  align-items:center;
  gap:var(--c-space-2);
  min-width:150px;
}
.accounts-page .accounts-share-field{width:88px;flex:none}
.accounts-page .accounts-share-unit{
  color:var(--c-muted);
  font-size:var(--c-text-sm);
}

/* The shared .c-table anchor colour would otherwise win over .c-btn. */
.accounts-page .c-table .c-btn,
.accounts-page .c-table .c-btn:hover{text-decoration:none}
.accounts-page .c-table a.c-btn--primary,
.accounts-page .c-table a.c-btn--primary:hover{color:var(--c-on-accent)}
.accounts-page .c-table a.c-btn--secondary,
.accounts-page .c-table a.c-btn--secondary:hover{color:var(--c-muted)}

/* Device ownership ------------------------------------------------------ */

.accounts-page .accounts-owner-toolbar{align-items:flex-end}
.accounts-page .accounts-owner-filter{
  width:190px;
  flex:none;
}
.accounts-page .accounts-owner-stats{margin-bottom:var(--c-space-4)}
.accounts-page .accounts-owner-stats .c-stat{
  padding:14px 16px;
  box-shadow:none;
}
.accounts-page .accounts-owner-stats .c-stat-value{font-size:1.5rem}
.accounts-page .accounts-owners-list{
  display:flex;
  flex-direction:column;
  gap:var(--c-space-3);
  min-width:0;
}
.accounts-page .accounts-owner-box{min-width:0}
.accounts-page .accounts-owner-head{
  align-items:flex-start;
  gap:var(--c-space-2) var(--c-space-3);
}
.accounts-page .accounts-owner-main{
  display:flex;
  align-items:flex-start;
  gap:var(--c-space-2);
  flex:1;
  min-width:220px;
  cursor:pointer;
}
.accounts-page .accounts-owner-toggle{flex:none;margin-top:1px}
.accounts-page .accounts-owner-heading{min-width:0;line-height:1.3}
.accounts-page .accounts-owner-title{
  color:var(--c-ink);
  font-weight:650;
  overflow-wrap:anywhere;
}
.accounts-page .accounts-owner-sub{
  margin-top:2px;
  color:var(--c-muted);
  font-size:var(--c-text-xs);
  line-height:1.5;
}
.accounts-page .accounts-owner-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--c-space-2);
  flex-wrap:wrap;
  margin-left:auto;
}
.accounts-page .accounts-owner-select{
  width:190px;
  min-width:0;
  flex:none;
}
.accounts-page .accounts-owner-body{
  position:relative;
  padding:var(--c-space-2) var(--c-space-4) var(--c-space-3) calc(var(--c-space-6) + var(--c-space-2));
}
.accounts-page .accounts-owner-body[hidden]{display:none}
.accounts-page .accounts-owner-body::before{
  content:"";
  position:absolute;
  top:var(--c-space-3);
  bottom:var(--c-space-3);
  left:var(--c-space-5);
  border-left:2px solid var(--c-line);
}
.accounts-page .accounts-owner-row{
  display:flex;
  align-items:center;
  gap:var(--c-space-2);
  flex-wrap:wrap;
  padding:var(--c-space-2) 0;
  border-bottom:1px dashed var(--c-line);
}
.accounts-page .accounts-owner-row:last-child{border-bottom:0}
.accounts-page .accounts-owner-name{
  flex:1;
  min-width:220px;
  font-size:var(--c-text-md);
  overflow-wrap:anywhere;
}
.accounts-page .accounts-owner-row .accounts-owner-select{width:170px}

@media(max-width:767.98px){
  .accounts-page .accounts-owner-toolbar{align-items:stretch}
  .accounts-page .accounts-owner-filter{width:100%}
}
@media(max-width:600px){
  .accounts-page .accounts-owner-main{min-width:100%}
  .accounts-page .accounts-owner-actions{
    width:100%;
    justify-content:flex-start;
    margin-left:0;
  }
  .accounts-page .accounts-owner-select,
  .accounts-page .accounts-owner-row .accounts-owner-select{width:100%}
  .accounts-page .accounts-owner-name{min-width:100%}
  .accounts-page .accounts-owner-body{
    padding-right:var(--c-space-3);
    padding-left:var(--c-space-5);
  }
  .accounts-page .accounts-owner-body::before{left:var(--c-space-2)}
}
@media(max-width:575.98px){
  .accounts-page .accounts-owner-toolbar{width:100%;margin-left:0}
  .accounts-page .accounts-owner-toolbar .c-btn{flex:1 1 auto}
}