.mc-top{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0 14px 0;
}

.mc-title{
  margin:0;
  font-size:22px;
  font-weight:900;
  color:#1f2937;
}

.mc-actions{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.mc-smallbtn{
  width:38px;
  height:38px;
  justify-content:center;
  padding:0;
  border-radius:12px;
}

/* Card */
.mc-card{
  background:#fff;
  border:1px solid #e6edf7;
  border-radius:14px;
  overflow:hidden;
}

/* Table */
.mc-table{
  width:100%;
  margin:0;
  border-collapse:separate;
  border-spacing:0;
}

.mc-table thead th{
  font-size:12px;
  font-weight:900;
  color:#334155;
  padding:14px 12px;
  border-bottom:1px solid #eef2f7;
  white-space:nowrap;
}

.mc-table tbody td{
  font-size:12px;
  font-weight:800;
  color:#334155;
  padding:16px 12px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:middle;
}

/* first col */
.mc-select{ width:160px; }
.mc-selecthead{
  display:flex;
  align-items:center;
  gap:10px;
}
.mc-none{
  font-weight:900;
  color:#111827;
  font-size:12px;
}

/* sortable */
.sortable{
  position:relative;
  padding-right:22px !important;
}
.sortable:after{
  content:"\f0dc";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  color:#cbd5e1;
  font-size:11px;
}

/* highlight row like screenshot light blue */
.mc-row-highlight{
  background:#e8f4ff;
}

/* contact cell */
.mc-contact .name{
  font-weight:900;
  color:#334155;
}
.mc-contact .meta{
  font-size:11px;
  color:#94a3b8;
  font-weight:900;
  margin-top:2px;
}

.mc-plus{
  margin-top:6px;
  width:24px;
  height:24px;
  border-radius:8px;
  border:1px solid #dbeafe;
  background:#fff;
  color:#2563eb;
  display:inline-grid;
  place-items:center;
  font-size:12px;
}
.mc-plus.tiny{
  margin-top:6px;
  width:22px;
  height:22px;
  border-radius:8px;
}

/* assigned */
.mc-assigned div{
  font-weight:900;
}
.mc-change{
  display:inline-block;
  margin-top:2px;
  font-size:11px;
  font-weight:900;
  color:#2563eb;
  text-decoration:none;
}

/* counts */
.mc-count{
  font-weight:900;
  color:#334155;
}
.mc-ledger{
  font-size:11px;
  font-weight:900;
  color:#94a3b8;
  margin-top:2px;
}

/* action buttons */
.mc-actions-icons{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
.mc-ibtn{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid #e6edf7;
  background:#fff;
  color:#4f7cff;
  display:grid;
  place-items:center;
  font-size:13px;
}
.mc-ibtn:hover{
  background:#f4f8ff;
}
.mc-green{
  color:#16a34a;
  border-color:#dcfce7;
}

/* Checkbox look */
.form-check-input{
  cursor:pointer;
}

/* Responsive */
@media(max-width:992px){
  .mc-actions{ margin-left:0; }
  .mc-top{ flex-wrap:wrap; }
}
/* page padding same like screenshot */
.cs-wrap{
  padding: 18px 18px 40px 18px;
  min-height: calc(100vh - 140px);
}

/* big white card */
.cs-card{
  background:#fff;
  border:1px solid #e6edf7;
  border-radius:10px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  padding: 22px 22px 18px 22px;
  max-width: 100%;
}

/* title */
.cs-head{
  font-size:16px;
  font-weight:900;
  color:#111827;
  margin-bottom: 16px;
}

/* form */
.cs-form{
  width:100%;
}

.cs-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 10px 0;
}

.cs-label{
  width: 120px;
  font-size:12px;
  font-weight:900;
  color:#111827;
  margin:0;
}

.cs-field{
  flex:1;
}

.cs-input{
  height: 34px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 800;
  color:#334155;
}

.cs-input::placeholder{
  color:#9ca3af;
  font-weight:800;
}

/* divider line */
.cs-divider{
  border-top: 1px solid #eef2f7;
  margin: 14px 0 14px;
}

/* button bottom left like screenshot */
.cs-actions{
  display:flex;
  justify-content:flex-start;
}

.cs-btn{
  background:#5b86f7;
  color:#fff;
  font-weight:900;
  border-radius:0;
  padding: 10px 28px;
  font-size: 12px;
  border: none;
}

.cs-btn:hover{
  background:#4f7cff;
  color:#fff;
}

/* footer */
.cs-foot{
  margin-top: 28px;
  font-size:11px;
  font-weight:800;
  color:#94a3b8;
  padding-left: 6px;
}

/* responsive */
@media (max-width: 768px){
  .cs-row{
    flex-direction: column;
    align-items: stretch;
    gap:8px;
  }
  .cs-label{
    width:100%;
  }
  .cs-btn{
    width:120px;
  }
}