/* =========================================================
   MASTER SUITE — CANONICAL COLUMN MANAGER
   ========================================================= */


html.ms-column-manager-open{
  overflow:hidden;
}


.ms-column-manager[hidden]{
  display:none !important;
}


.ms-column-manager{
  position:fixed;
  inset:0;
  z-index:10000;
}


.ms-column-manager-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(31,39,65,.16);

  backdrop-filter:
    blur(2px);
}


.ms-column-manager-panel{
  position:absolute;

  top:0;
  right:0;
  bottom:0;

  width:min(
    430px,
    calc(100vw - 40px)
  );

  display:flex;
  flex-direction:column;

  background:
    var(
      --ms-surface-primary,
      #ffffff
    );

  border-left:
    1px solid
    var(
      --ms-border-color,
      #e2e6ef
    );

  box-shadow:
    -18px 0 50px
    rgba(31,39,65,.12);
}


.ms-column-manager-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;

  padding:
    24px 24px 16px;
}


.ms-column-manager-eyebrow{
  margin-bottom:5px;

  color:#939db3;

  font-size:11px;
  font-weight:800;

  letter-spacing:.12em;
}


.ms-column-manager-header h2{
  margin:0;

  font-size:18px;
  line-height:1.25;
}


.ms-column-manager-header p{
  margin:
    7px 0 0;

  color:
    var(
      --ms-text-secondary,
      #738097
    );

  font-size:12.5px;
  line-height:1.5;
}


.ms-column-manager-close{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    var(
      --ms-border-color,
      #e3e7ef
    );

  border-radius:10px;

  background:
    transparent;

  color:
    var(
      --ms-text-secondary,
      #758197
    );

  font-size:21px;
  line-height:1;

  cursor:pointer;
}


.ms-column-manager-module{
  margin:
    0 24px 12px;

  padding:
    8px 11px;

  border-radius:9px;

  background:
    var(
      --ms-surface-secondary,
      #f6f8fb
    );

  color:
    var(
      --ms-text-secondary,
      #69758c
    );

  font-size:12px;
  font-weight:700;
}


.ms-column-manager-actions-top{
  display:flex;
  align-items:center;
  gap:8px;

  padding:
    0 24px 12px;
}


.ms-column-manager-actions-top button{
  min-height:31px;

  padding:
    0 10px;

  border:
    1px solid
    var(
      --ms-border-color,
      #e2e6ee
    );

  border-radius:8px;

  background:
    transparent;

  color:
    var(
      --ms-text-primary,
      #273044
    );

  font:inherit;
  font-size:11.5px;
  font-weight:750;

  cursor:pointer;
}


.ms-column-manager-list{
  flex:1 1 auto;

  overflow:auto;

  padding:
    0 16px 20px;
}


.ms-column-manager-row{
  min-height:45px;

  margin-bottom:5px;

  display:grid;

  grid-template-columns:
    24px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:7px;

  padding:
    0 10px;

  border:
    1px solid
    transparent;

  border-radius:10px;

  background:
    var(
      --ms-surface-secondary,
      #f8f9fc
    );

  transition:
    border-color .12s ease,
    background .12s ease,
    opacity .12s ease;
}


.ms-column-manager-row:hover{
  border-color:
    var(
      --ms-border-color,
      #e0e4ed
    );
}


.ms-column-manager-row.is-dragging{
  opacity:.45;
}


.ms-column-manager-row.is-drag-over{
  border-color:
    var(
      --ms-command-purple,
      #6758ef
    );

  background:
    rgba(103,88,239,.07);
}


.ms-column-manager-grip{
  color:#9ca6b9;

  font-weight:800;

  cursor:grab;

  user-select:none;
}


.ms-column-manager-row label{
  min-width:0;

  display:flex;
  align-items:center;

  gap:10px;

  cursor:pointer;
}


.ms-column-manager-row input{
  width:16px;
  height:16px;

  accent-color:
    var(
      --ms-command-purple,
      #6758ef
    );
}


.ms-column-manager-name{
  min-width:0;

  overflow:hidden;

  color:
    var(
      --ms-text-primary,
      #263047
    );

  font-size:12.5px;
  font-weight:750;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.ms-column-manager-required{
  padding:
    4px 7px;

  border-radius:999px;

  background:
    rgba(103,88,239,.09);

  color:
    var(
      --ms-command-purple,
      #6758ef
    );

  font-size:9.5px;
  font-weight:800;
}


.ms-column-manager-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:9px;

  padding:
    16px 20px;

  border-top:
    1px solid
    var(
      --ms-border-color,
      #e3e7ef
    );
}


.ms-column-manager-footer button{
  min-height:38px;

  padding:
    0 14px;

  border-radius:9px;

  font:inherit;
  font-size:12.5px;
  font-weight:800;

  cursor:pointer;
}


.ms-column-manager-footer
.is-secondary{
  border:
    1px solid
    var(
      --ms-border-color,
      #dfe4ed
    );

  background:
    transparent;

  color:
    var(
      --ms-text-primary,
      #263047
    );
}


.ms-column-manager-footer
.is-primary{
  border:
    1px solid
    var(
      --ms-command-purple,
      #6758ef
    );

  background:
    var(
      --ms-command-purple,
      #6758ef
    );

  color:#ffffff;
}


/* Preserve hidden columns against table defaults */

.ms-canonical-explorer-table
[hidden]{
  display:none !important;
}


/* =========================================================
   DARK FOUNDATION
   ========================================================= */


html.ms-theme-dark
.ms-column-manager-backdrop{
  background:
    rgba(4,7,15,.48);
}


html.ms-theme-dark
.ms-column-manager-panel{
  background:
    var(
      --ms-surface-primary,
      #1c2230
    );

  border-left-color:
    rgba(255,255,255,.10);
}


html.ms-theme-dark
.ms-column-manager-row{
  background:
    rgba(255,255,255,.035);
}


html.ms-theme-dark
.ms-column-manager-close,
html.ms-theme-dark
.ms-column-manager-actions-top button,
html.ms-theme-dark
.ms-column-manager-footer
.is-secondary{
  border-color:
    rgba(255,255,255,.10);

  color:
    var(
      --ms-text-primary,
      #edf1f8
    );
}


@media(max-width:700px){

  .ms-column-manager-panel{
    width:100%;
  }

}