.employee-directory-page{

  width:
    100%;

  text-align:
    left;

}


.employee-directory-page h2{

  margin:
    0 0 8px;

  color:
    #111827;

}


.employee-directory-page > p{

  margin:
    0 0 18px;

  color:
    #6b7280;

}


.employee-directory-toolbar{

  display:
    grid;

  grid-template-columns:
    minmax(240px, 1fr)
    repeat(3, minmax(150px, 210px))
    auto;

  gap:
    10px;

  align-items:
    center;

  margin:
    20px 0 16px;

}


.employee-directory-control{

  width:
    100%;

  min-height:
    40px;

  padding:
    8px 10px;

  border:
    1px solid #d1d5db;

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #111827;

  box-sizing:
    border-box;

}


.employee-directory-control:focus{

  outline:
    none;

  border-color:
    #16a34a;

  box-shadow:
    0 0 0 3px rgba(22,163,74,.12);

}


.employee-directory-search{

  min-width:
    0;

}


.employee-directory-refresh-button{

  min-height:
    40px;

  padding:
    8px 16px;

  border:
    1px solid #16a34a;

  border-radius:
    8px;

  background:
    #16a34a;

  color:
    #ffffff;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    all .2s ease;

}


.employee-directory-refresh-button:hover{

  background:
    #15803d;

  border-color:
    #15803d;

}


.employee-directory-table-wrapper{

  width:
    100%;

  overflow-x:
    auto;

  border:
    1px solid #e5e7eb;

  border-radius:
    10px;

  background:
    #ffffff;

}


.employee-directory-table{

  width:
    100%;

  min-width:
    980px;

  border-collapse:
    collapse;

}


.employee-directory-table th{

  white-space:
    nowrap;

  text-align:
    left;

}


.employee-directory-table td{

  color:
    #374151;

}


.employee-directory-status{

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    72px;

  padding:
    4px 10px;

  border-radius:
    999px;

  font-size:
    12px;

  font-weight:
    700;

  text-transform:
    capitalize;

}


.employee-directory-status-active{

  background:
    #dcfce7;

  color:
    #166534;

}


.employee-directory-status-resigned{

  background:
    #fee2e2;

  color:
    #991b1b;

}


.employee-directory-pagination{

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    15px;

  margin-top:
    15px;

}


.employee-directory-pagination button{

  min-width:
    90px;

  padding:
    8px 14px;

  border:
    1px solid #d1d5db;

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #374151;

  cursor:
    pointer;

}


.employee-directory-pagination button:hover:not(:disabled){

  border-color:
    #16a34a;

  color:
    #15803d;

}


.employee-directory-pagination button:disabled{

  opacity:
    .5;

  cursor:
    not-allowed;

}


.employee-directory-id{

  display:
    grid;

  gap:
    4px;

  min-width:
    175px;

}


.employee-directory-id-row{

  display:
    flex;

  align-items:
    baseline;

  gap:
    5px;

  white-space:
    nowrap;

}


.employee-directory-id-label{

  color:
    #9ca3af;

  font-size:
    11px;

}


.employee-directory-id-value{

  color:
    #374151;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;

  font-size:
    12px;

}


@media (max-width: 1100px){

  .employee-directory-toolbar{

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

  .employee-directory-search{

    grid-column:
      1 / -1;

  }

}


@media (max-width: 640px){

  .employee-directory-toolbar{

    grid-template-columns:
      1fr;

  }

  .employee-directory-search{

    grid-column:
      auto;

  }

  .employee-directory-refresh-button{

    width:
      100%;

  }

}