/* ===========================
   PROJECTS PANEL (full rewrite)
   =========================== */
#projects-wrap.account-panel{
  z-index: 960; /* width comes from .account-panel */
}

/* Mount & chrome */
#projects-wrap .floating-panel__header{
  position: relative;
  padding: 16px 20px;
  min-height: 0;
}

#projects-wrap .floating-panel__body{
  padding:12px 14px 12px 12px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; flex:1 1 0; min-height:0;
}
/* Scrollbar track: keep it away from border-radius at top and bottom */
#projects-wrap.account-panel > .floating-panel__body::-webkit-scrollbar-track{
  margin-top: 10px;
  margin-bottom: 30px;
}
#projects-mount{ width:100%; max-width:640px; margin:0 auto; min-height:0; }
#projects-wrap .projects-ui{ width:100%; box-sizing:border-box; }

/* ---------- Toolbar ---------- */
/* ---------- Toolbar (match Account style) ---------- */
.projects-toolbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:18px;
  margin:0; padding:0 0 12px 0;
  background: var(--ak-offwhite);
}

.projects-search{
  flex:0 1 420px; height:var(--s40-p-);
  border-radius:var(--ak-radius-pill);
  background:var(--ak-light);
  display:flex; align-items:center; gap:12px; padding:0 18px;
  border: var(--ak-border-subtle);
}

.projects-search__icon{ width:20px; height:20px; opacity:.65; }

.space-edit-name,
.projects-search__input{
  flex:1 1 auto; border:0; outline:0; background:transparent;
  font-size:var(--account-size_reg);
  font-weight:var(--account--font-weight_1);
  color:var(--ak-dark) !important;
}

.projects-new-btn{
  flex:0 0 auto; height:var(--s40-p-); padding:0 20px;
  margin-left:auto;
  border: none;
  border-radius:var(--ak-radius-pill);
  background: var(--ak-accent);
   color:var(--ak-white);
  font-size:var(--account-size_large);
  font-weight:var(--account--font-weight_1);
  cursor:pointer; text-align:center;
}
/* Disabled state must override hover/active */
.projects-new-btn.is-disabled,
.projects-new-btn:disabled,
.projects-new-btn[aria-disabled="true"]{
  background: var(--ak-mid-gray);
  color: var(--ak-light);
  cursor: not-allowed;
  pointer-events: none; /* prevents hover/active entirely */
  opacity: .65;
}

/* Keep hover/active only for enabled */
.projects-new-btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):hover{
  background: var(--ak-active);
}
.projects-new-btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):active{
  background: var(--ak-feedbackbg);
}


.projects-columns,
.project-row{
  display:grid;
  grid-template-columns:var(--projects-grid);
  column-gap:12px;
  align-items:center;
  box-sizing:border-box;
  padding:0 12px; /* avoids last-column clipping against rounded row */
}

.projects-columns{
  margin:0 0 12px 0;
  font-family:var(--font-family);
  font-size:var(--account-size_reg);
  font-weight:var(--account--font-weight_1);
  color:var(--ak-dark);
}

.projects-columns > *{ justify-self:start; text-align:left; margin:0; padding:0; white-space:nowrap; }
.projects-col--area, .projects-col--spaces{ justify-self:start; text-align:left; }


.projects-columns > *,
.project-row > *{ min-width: 0; }

/* Numeric cells */
.project-area,
.project-spaces{
  justify-self:end;
  text-align:left;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.project-spaces{ font-weight: var(--account--font-weight_2); }


/* Sort arrow */
#projects-sort-modified{ position:relative; cursor:pointer; user-select:none; padding-right:24px; }
#projects-sort-modified::after{
  content:""; position:absolute; right:0; top:50%; width:18px; height:18px; transform:translateY(-50%);
  background-color:var(--ak-white);
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}
#projects-sort-modified[data-sort="desc"]::after{ -webkit-mask-image:url("/icons/arrowdown.svg"); mask-image:url("/icons/arrowdown.svg"); }
#projects-sort-modified[data-sort="asc"]::after{ -webkit-mask-image:url("/icons/arrowup.svg");   mask-image:url("/icons/arrowup.svg");   }

/* ---------- List + Rows ---------- */
/* ---------- List + Rows (match Account rows) ---------- */
/* ---------- List + Rows (pill “button” rows) ---------- */
.projects-list{ display:flex; flex-direction:column; gap:var(--grid-gap); }

.project-row{
  height: var(--ak-height-pill);
  border-radius: var(--ak-radius-pill);
  background: var(--ak-dark);
  padding: 0 12px;                 /* keep grid padding */
  border: 0;
  transition: background .12s ease, box-shadow .12s ease;
}
.project-row:hover{ background: var(--ak-mid-gray); }
.project-row:active{ background: var(--ak-dark); }
.project-row:focus-within{ box-shadow: 0 0 0 2px #0000001f inset; }


.project-row > *{
  font-size:var(--account-size_reg);
  font-weight:var(--account--font-weight_1);
  color:var(--ak-offwhite);
  white-space:nowrap;
}
.project-row > *{ justify-self:start; text-align:left; }

.project-row{ cursor: pointer; }
.project-row :where(input,button,a,label){ cursor: default; }


/* Star button */
.project-delete,
.space-delete,
.project-star{
  justify-self:center; width:28px; height:28px; display:grid; place-items:center;
  padding:0; border:0; background:transparent; cursor:pointer; border-radius:50%;
}
.project-delete:hover,
.space-delete:hover,
.project-star:hover{ background:rgba(0,0,0,.06); }

.project-delete img,
.space-delete img,
.project-star img{ width:16px; height:16px; opacity:.55; }

.project-star.is-starred img{ opacity:.95; }

.project-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.editable{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.edit-icon{ width:16px; height:16px; opacity:.65; flex:0 0 auto; }

.editable input{
  border:0; outline:0; background:transparent; width:100%; min-width:0; font:inherit; color:var(--ak-white);
}

.project-name input{ font-weight: var(--account--font-weight_2); }


/* Kill any legacy dots if still emitted */
.project-spaces .dot, .project-spaces .spaces-plus{ display:none !important; }

/* Group (row + expand) */
.project-item{ display:flex; flex-direction:column; gap:10px; }
.project-expand{
  border-radius:var(--ak-radius-pill);
 background:transparent;
  padding:12px; box-sizing:border-box;
}
/*SPAPP
.spaces-list{
  display:flex;
  flex-direction:column;
  gap: var(--grid-gap);
  background: transparent;
  border-radius: 0;
}
/* Flat list items — match Account rows */
.space-row{
  display:grid;
grid-template-columns:
32px
  18px             
  minmax(15ch, 2fr) 
  6ch              
  6ch           
  6ch             
  minmax(16ch, 2.2fr) 
  32px;      
  align-items:center;
  column-gap:12px;
  min-height: var(--s36-p-);
  padding: var(--s12-p-) 12px;
  border-radius: 0;            
  background: transparent; 
  box-shadow: none;             
  width:100%;
  box-sizing:border-box;
  border-bottom: var(--s1-p-) solid rgba(0,0,0,0.14); /* simple divider */
}
.space-row:last-child{
  border-bottom: 0;
}

.space-row > *{ min-width:0; }

.space-name{
  font-weight: var(--account--font-weight_2);
}
.space-modified,
.space-area,
.space-spec{
  font-size: var(--app_font_small-size-ui);

}

.space-actions{
  display:flex;
  align-items:center;
  gap:16px;

  justify-self:stretch;     /* fill the grid column */
  justify-content:flex-end;

  white-space:nowrap;
}
.space-actions button{
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--app_font_small-size-ui);
}
.space-actions img{ width:14px; height:14px; opacity:.8; }

.project-addspace{ padding: 12px 0 0 0; } /* keep Add Space under the flat list */




.space-row button{
  appearance:none; border:0; background:transparent; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer;
}
.space-rename,
.space-open{ width:28px; height:28px; display:grid; place-items:center; border-radius:50%; }
.space-rename:hover,
.space-open:hover{ background: var(--ak-dark)}
.space-rename img,
.space-open img{ width:16px; height:16px; opacity:.75; }

.space-name{ font-weight: var(--account--font-weight_2); color: var(--ak-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.space-area{ font-variant-numeric: tabular-nums; }


.project-addspace{ margin-top: 6px; }
.project-add-space{
  width:100%; height: var(--s40-p-);
  border-radius: var(--ak-radius-pill);
  border: var(--s1-p-) solid var(--ak-dark);
  background: transparent; color: var(--ak-dark);
  font: inherit; font-size: var(--account-size_reg); font-weight: var(--account--font-weight_1);
  cursor: pointer;
}
.project-add-space:hover{ background: var(--ak-hover); }
.project-add-space:active{ background: rgba(0,0,0,0.07); }



.space-row:last-child{ border-bottom: 0; }
.space-name{ font-weight: var(--account--font-weight_2); color: var(--ak-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.space-area{ font-variant-numeric: tabular-nums; }

/* One-time "new floor" highlight */
.space-row.is-new-highlight{
  outline: var(--s1-p-) solid var(--ak-accent);
  outline-offset: 0;
  border-radius: var(--ak-radius-pill);
}
.space-row.is-new-highlight{
  border-bottom-color: transparent;
}
.space-edit-ico{
  appearance:none;
  border:0;
  padding:0;
  margin:0;

  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}

.space-edit-ico::before{
  content:"";
  width:16px;
  height:16px;

  background-color: var(--ak-dark);
  -webkit-mask-image: url("/icons/edit.svg");
  mask-image: url("/icons/edit.svg");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;

  opacity:.65;
}
.space-edit-name.is-highlight{
  outline: var(--s1-p-) solid var(--ak-accent);
  border-radius: var(--ak-radius-pill);
}



/* Add Space button (full width pill) */
.project-addspace{ margin-top: 12px; }
.project-add-space{
  width:100%; height: var(--s40-p-);
  border-radius: var(--ak-radius-pill);
  border: var(--s1-p-) solid var(--ak-dark);
  background: transparent; color: var(--ak-dark);
  font: inherit; font-size: var(--account-size_reg); font-weight: var(--account--font-weight_1);
  cursor: pointer;
}
.project-add-space:hover{ background: var(--ak-hover); }
.project-add-space:active{ background: rgba(0,0,0,0.07); }

.projects-plus-note {
  margin-top: 48px;
  font-size: 0.9375rem; /* 15px if base=16 */
  line-height: 4.4;
  color: var(--ak-mid-gray);
  text-align: center;
}

.projects-plus-note .link-underline {
  text-decoration: underline;
  cursor: pointer;
}

/* ===========================
   Mobile-only cleanup
   =========================== */
@media (max-width: 768px){
  #projects-wrap .floating-panel__body{
    padding:10px;
  }

  .projects-toolbar{
    flex-wrap:wrap;
    gap:10px;
    padding-bottom:10px;
  }

  .projects-search{
    flex:1 1 100%;
    min-width:0;
  }

  .projects-new-btn{
    width:100%;
    margin-left:0;
  }

  .projects-columns,
  .project-row{
    grid-template-columns: 32px minmax(0,1fr) 8ch 5ch;
    column-gap:8px;
    padding:0 10px;
  }

  .projects-col--ref,
  .projects-col--modified,
  .project-ref,
  .project-modified{
    display:none;
  }

  .projects-columns{
    font-size:var(--app_font_small-size-ui);
    margin-bottom:8px;
  }

  .project-row{
    min-height:var(--s40-p-);
    height:auto;
  }

  .project-expand{
    padding:10px 8px;
  }

  .spaces-list{
    gap:8px;
  }

  .space-row{
    grid-template-columns: 28px 24px minmax(0,1fr) auto;
    column-gap:8px;
    row-gap:6px;
    padding:10px 8px;
    min-height:0;
    align-items:center;
  }

  .space-delete{ grid-column:1; grid-row:1; }

  .space-edit-ico,
  .space-rename{ grid-column:2; grid-row:1; }

  .space-edit-name,
  .space-name{
    grid-column:3;
    grid-row:1;
    min-width:0;
  }

  .space-open{ grid-column:4; grid-row:1; }

  .space-modified,
  .space-spec{
    display:none;
  }

  .space-area{
    grid-column:3;
    grid-row:2;
    justify-self:start;
    text-align:left;
    opacity:.8;
  }

  .space-actions{
    grid-column:4;
    grid-row:2;
    justify-self:end;
    justify-content:flex-end;
    gap:8px;
  }

  .space-actions button{
    font-size:var(--app_font_small-size-ui);
  }
}