/* Dashboard filter pills, unit pills, posting-unit selector, and mobile rules. */

/* ══════════════════════════════════════════════
   DASHBOARD LOCATION FILTER PILLS
   ══════════════════════════════════════════════ */

.dashboard-status-filter{
  display:flex;
  gap:.48rem;

  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;

  margin:0 0 .9rem;
  padding:.1rem .15rem .45rem;
}

.dashboard-status-filter::-webkit-scrollbar{
  display:none;
}

.dashboard-filter-pill{
  flex:0 0 auto;
  scroll-snap-align:start;

  min-height:36px;
  padding:.48rem .82rem;

  border:1px solid var(--border);
  border-radius:999px;

  background:#fff;
  color:var(--muted);

  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;

  white-space:nowrap;
  cursor:pointer;

  box-shadow:var(--shadow-sm);

  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .1s ease;
}

.dashboard-filter-pill:active{
  transform:scale(.97);
}

.dashboard-filter-pill.active{
  border-color:rgba(170,68,101,.22);
  background:var(--accent-soft);
  color:var(--accent);
}


/* ══════════════════════════════════════════════
   LOCATION AND UNIT PILLS IN INTERN LIST
   ══════════════════════════════════════════════ */

.student-details{
  min-width:0;
}

.student-name-row{
  min-width:0;
}

.student-tags-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.28rem;

  margin-top:.34rem;
}

.student-tags-row .duty-location-tag{
  display:inline-flex;
  align-items:center;

  width:auto;
  max-width:9rem;

  margin:0;
  padding:.18rem .48rem;

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

  border:1px solid rgba(170,68,101,.14);
  border-radius:999px;

  background:var(--accent-soft);
  color:var(--accent);

  font-family:var(--sans);
  font-size:.58rem;
  font-weight:700;
  line-height:1.2;
}

.posting-unit-tag{
  display:inline-grid;
  place-items:center;

  min-width:24px;
  height:21px;
  padding:0 .36rem;

  border:1px solid rgba(36,35,49,.13);
  border-radius:999px;

  background:rgba(36,35,49,.055);
  color:var(--ink);

  font-family:var(--sans);
  font-size:.6rem;
  font-weight:700;
  line-height:1;
}


/* =========================================================
   POSTING UNIT MENU
   ========================================================= */

.unit-select-menu{
  width:220px;
}

.select-menu-label{
  padding:.5rem .45rem .28rem;

  color:var(--muted);

  font-size:.56rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.unit-option-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.34rem;
}

.unit-option-grid-four{
  grid-template-columns:repeat(4,1fr);
}

.status-select-menu .unit-option-grid button{
  min-height:40px;

  display:grid;
  place-items:center;

  padding:.45rem 0;

  border:1px solid var(--border);
  border-radius:10px;

  background:#fff;
  color:var(--ink);

  font-family:var(--sans);
  font-size:.75rem;
  font-weight:700;

  cursor:pointer;

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

.status-select-menu .unit-option-grid button:hover,
.status-select-menu .unit-option-grid button:focus-visible,
.status-select-menu .unit-option-grid button:active{
  border-color:rgba(170,68,101,.24);
  background:var(--accent-soft);
  color:var(--accent);
  outline:none;
}


/* =========================================================
   MOBILE
   Keep the label/value layout, only resize the control
   ========================================================= */

@media(max-width:430px){

  .student-item{
    align-items:flex-start;
  }

  .student-name-row{
    align-items:flex-start;
    flex-direction:column;
    gap:.24rem;
  }

  .duty-location-tag{
    display:inline-flex;
    max-width:100%;
    margin-bottom:.5rem;

    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }

  .call-btn{
    align-self:center;
  }

  /*
   * Do not make the entire profile row vertical.
   * Keep the value on the left and dropdown on the right.
   */
  .profile-status-field{
    align-items:center;
    flex-direction:row;
  }

  .status-select{
    width:145px;
    min-width:145px;
  }

  .status-select-trigger{
    min-height:50px;
    padding:.7rem .66rem .7rem .88rem;
    font-size:.78rem;
  }

  .status-select-trigger svg{
    width:32px;
    height:32px;
    flex-basis:32px;
    padding:8px;
  }

  .status-select-menu{
    right:0;
    left:auto;
    width:190px;
  }

  .unit-select-menu{
    width:215px;
  }
}